Integrate Revolution Slider into Codeigneter - codeigniter

Question

I would like to tell you first that I have bought Revolution slider,It working fine on localhost.It has its own seperate Dashboard, installation,etc.But I want to integrate this plugin into Codeigniter, I don't know how to do it.As I realized, plugin structure is same as MVC framework.
Any Idea or instruction for it.
Thanks in Advance.

Answer 1

You can use revolution slider in codeigniter simply as a javascript library in your frontend you can include it by include its javscript and css files as follwing
<!-- CSS Dependencies -->
<link rel='stylesheet' href='css/rev_slider/settings.css' />
<link rel='stylesheet' href='css/rev_slider/layers.css' />
<link rel='stylesheet' href='css/navigation.css' />
<script src='js/jquery.min.js'></script>
<!-- SLIDER REVOLUTION 5.x SCRIPTS -->
<script src='js/rev_slider/jquery.themepunch.tools.min.js'></script>
<script src='js/rev_slider/jquery.themepunch.revolution.min.js'></script>
and then you can use revolution slider in your views
The following code snippet is the HTML structure for Revolution Slider
<section id="slider" class="revoslider-wrap full-screen slider-parallax clearfix z-index-1">
<div id="main_slider_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="concept1" style="background-color:#000000;padding:0px;">
<!-- START REVOLUTION SLIDER 5.1.1RC fullscreen mode -->
<div class="revolution-slider rev_slider" style="height: 0; overflow: hidden;">
<ul> <!-- SLIDE -->
<li data-index="rs-1" data-transition="turnoff-vertical" data-slotamount="7" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" data-thumb="http://static.soaptheme.net/uploads/revslider1/concept/bg3.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="<?=asset_url()?>img/slider/slide1/bg.jpg" alt="" title="Slider1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-1"
data-x="12"
data-y="40"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="300"
data-responsive_offset="on"
style="z-index: 2;"><img src="<?=img_url()?>slider/slide1/1.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-2"
data-x="125"
data-y="225"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:left;s:2000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1000"
data-responsive_offset="on"
style="z-index: 3;"><img src="<?=img_url()?>slider/slide1/2.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-3"
data-x="1002"
data-y="400"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1300"
data-responsive_offset="on"
style="z-index: 4;"><img src="<?=img_url()?>slider/slide1/3.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-4"
data-x="1017"
data-y="478"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:2000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1600"
data-responsive_offset="on"
style="z-index: 5;"><img src="<?=img_url()?>slider/slide1/4.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-5"
data-x="691.136"
data-y="-138.128"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:right;s:1000;e:easeInOut;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1900"
data-responsive_offset="on"
style="z-index: 6;"><img src="<?=img_url()?>slider/slide1/5.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 6 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-6"
data-x="577.99"
data-y="14.471"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1000;e:easeInOut;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1900"
data-responsive_offset="on"
style="z-index: 7;"><img src="<?=img_url()?>slider/slide1/6.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 7 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-7"
data-x="580"
data-y="430"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1000;e:easeInOut;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1900"
data-responsive_offset="on"
style="z-index: 7;"><img src="<?=img_url()?>slider/slide1/7.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 8 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-8"
data-x="325"
data-y="424"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:right;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1900"
data-responsive_offset="on"
style="z-index: 7;"><img src="<?=img_url()?>slider/slide1/8.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 9 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-9"
data-x="290"
data-y="0"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1000"
data-responsive_offset="on"
style="z-index: 7;"><img src="<?=img_url()?>slider/slide1/9.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 10 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-10"
data-x="823"
data-y="375"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1000"
data-responsive_offset="on"
style="z-index: 8;"><img src="<?=img_url()?>slider/slide1/10.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 11 -->
<div class="tp-caption tp-resizeme"
id="slide-1-layer-11"
data-x="15"
data-y="360"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:left;s:1000;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1300"
data-responsive_offset="on"
style="z-index: 9;"><img src="<?=img_url()?>slider/slide1/11.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 12 -->
<div class="tp-caption caption-medium-title tp-resizeme"
id="slide-1-layer-12"
data-x="415"
data-y="250"
data-width="['auto']"
data-height="['auto']"
data-transform_idle="o:1;"
data-transform_in="x:50px;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="3000"
style="z-index: 10; width:100%;">
<img src="<?=asset_url()?>img/logo_svg/5-5.svg">
</div>
<!-- LAYER NR. 13 -->
<div class="tp-caption caption-medium-title tp-resizeme"
id="slide-1-layer-13"
data-x="415"
data-y="250"
data-width="['auto']"
data-height="['auto']"
data-transform_idle="o:1;"
data-transform_in="x:50px;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="3200"
style="z-index: 11; height:300px; width:100%;">
<img src="<?=asset_url()?>img/logo_svg/4-4.svg">
</div>
<!-- LAYER NR. 14 -->
<div class="tp-caption caption-medium-title tp-resizeme"
id="slide-1-layer-14"
data-x="415"
data-y="250"
data-width="['auto']"
data-height="['auto']"
data-transform_idle="o:1;"
data-transform_in="x:-50px;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="3500"
style="z-index: 14; height:300px; width:100%;">
<img src="<?=asset_url()?>img/logo_svg/2-2.svg">
</div>
<!-- LAYER NR. 15 -->
<div class="tp-caption caption-medium-title tp-resizeme"
id="slide-1-layer-15"
data-x="415"
data-y="250"
data-width="['auto']"
data-height="['auto']"
data-transform_idle="o:1;"
data-transform_in="x:-300px;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="4000"
style="z-index: 14; width:100%;">
<img src="<?=asset_url()?>img/logo_svg/3-3.svg">
</div>
<!-- LAYER NR. 16 -->
<div class="tp-caption caption-medium-title tp-resizeme"
id="slide-1-layer-16"
data-x="490"
data-y="340"
data-width="['auto']"
data-height="['auto']"
data-transform_idle="o:1;"
data-transform_in="x:-50;opacity:0;s:1500;e:Power3.easeInOut;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="4000"
style="z-index: 14; width:100%;">
<span class="garamond-regular text-white revo-slider-big-text">One Stop Shop</span>
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-2" data-transition="curtain-3" data-slotamount="7" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" data-thumb="http://static.soaptheme.net/uploads/revslider1/concept/bg4.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="<?=img_url()?>slider/slide2/bg4.jpg" alt="" title="Slider1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
id="slide-2-layer-1"
data-x="160"
data-y="175"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1500;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1400"
data-responsive_offset="on"
style="z-index: 6;"><img src="<?=img_url()?>slider/slide2/1.png" class="directline-assets" alt="" data-no-retina> </div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
id="slide-2-layer-2"
data-x="40"
data-y="410"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:left;s:1500;e:easeInOutBack;"
data-transform_out="x:-50px;opacity:0;s:300;s:300;"
data-start="1700"
data-responsive_offset="on"
style="z-index: 7;"><img src="<?=img_url()?>slider/slide2/2.png" alt="" data-no-retina> </div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
id="slide-2-layer-3"
data-x="182"
data-y="400"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:left;s:1500;e:easeInOutBack;"
data-transform_out="x:-50px;opacity:0;s:300;s:300;"
data-start="2000"
data-responsive_offset="on"
style="z-index: 8;"><img src="<?=img_url()?>slider/slide2/3.png" alt="" data-no-retina> </div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
id="slide-2-layer-4"
data-x="840"
data-y="400"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1500;e:easeInOutBack;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="2300"
data-responsive_offset="on"
style="z-index: 9;"><img src="<?=img_url()?>slider/slide2/4.png" alt="" data-no-retina> </div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme"
id="slide-2-layer-5"
data-x="980"
data-y="400"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="y:top;s:1500;e:easeInOutBack;"
data-transform_out="x:50px;opacity:0;s:300;s:300;"
data-start="2600"
data-responsive_offset="on"
style="z-index: 10;"><img src="<?=img_url()?>slider/slide2/5.png" alt="" data-no-retina> </div>
</li>
<!-- SLIDE -->
<li data-index="rs-3" data-transition="cube" data-slotamount="7" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="500" data-thumb="http://static.soaptheme.net/uploads/revslider1/concept/bg5.jpg" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="<?=img_url()?>slider/slide3/bg.jpg" alt="" title="Slider1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
id="slide-3-layer-1"
data-x="488"
data-y="411"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:0;s:1500;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="1900"
data-responsive_offset="on"
style="z-index: 6;">
<img src="<?=img_url()?>slider/slide3/1.png" alt="" data-no-retina />
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
id="slide-3-layer-2"
data-x="582"
data-y="411"
data-width="['none','none','none','none']"
data-height="['none','none','none','none']"
data-transform_idle="o:1;"
data-transform_in="x:0;s:1500;e:easeInOutElastic;"
data-transform_out="y:bottom;s:300;s:300;"
data-start="2400"
data-responsive_offset="on"
style="z-index: 7;">
<img src="<?=img_url()?>slider/slide3/2.png" alt="" data-no-retina />
</div>
</li>
</ul>
</div>
</div>
The following is javascript initialization for revolution slider
$('.revolution-slider').revolution({
sliderType: "standard",
sliderLayout: "auto",
dottedOverlay: "none",
delay: 900000,
navigation: {
keyboardNavigation: "off",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
mouseScrollReverse: "default",
onHoverStop: "on",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "default",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 20,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 20,
v_offset: 0
}
}
},
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: 1170,
gridheight: 646,
lazyType: "none",
shadow: 0,
spinner: "spinner4",
stopLoop: "on",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle: "off",
autoHeight: "off",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
nextSlideOnWindowFocus: "off",
disableFocusListener: false,
}
});
If you make the slider Dynamic you have to make it simple like just image slides without layers because to make layers dynamic it needs alot of processing for its cases in your back-end
Or if you have specific slides you can use them as static and you can do what ever you want in front-end
for further information to use revolution slider please read documentation in the following link:
Revolution Slider Documentation