将 Revolution Slider 集成到 Codeigniter 中
Integrate Revolution Slider into Codeigneter
我想先告诉你，我已经购买了 Revolution slider，它在 localhost.It 上运行良好，有自己独立的仪表板，安装，etc.But 我想将这个插件集成到 Codeigniter 中，我不知道该怎么做 it.As 我意识到，插件结构与 MVC 框架相同。
任何想法或说明。
提前致谢。
您可以在 codeigniter 中将 revolution slider 用作前端的 javascript 库，您可以通过将其 javscript 和 css 文件包含在 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>
然后您可以在视图中使用旋转滑块
以下代码片段是 Revolution Slider
的 HTML 结构
<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>
下面是javascript旋转滑块的初始化
$('.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,
}
});
如果你使滑块动态化，你必须让它变得简单，就像没有图层的图像幻灯片一样，因为要使图层动态化，它需要在后端对其案例进行大量处理
或者，如果您有特定的幻灯片，您可以将它们用作静态幻灯片，并且您可以在前端做任何您想做的事
有关使用旋转滑块的更多信息，请阅读以下文档link：
Revolution Slider Documentation
我想先告诉你，我已经购买了 Revolution slider，它在 localhost.It 上运行良好，有自己独立的仪表板，安装，etc.But 我想将这个插件集成到 Codeigniter 中，我不知道该怎么做 it.As 我意识到，插件结构与 MVC 框架相同。 任何想法或说明。 提前致谢。
您可以在 codeigniter 中将 revolution slider 用作前端的 javascript 库，您可以通过将其 javscript 和 css 文件包含在 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>
然后您可以在视图中使用旋转滑块
以下代码片段是 Revolution Slider
的 HTML 结构 <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>
下面是javascript旋转滑块的初始化
$('.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,
}
});
如果你使滑块动态化，你必须让它变得简单，就像没有图层的图像幻灯片一样，因为要使图层动态化，它需要在后端对其案例进行大量处理
或者，如果您有特定的幻灯片，您可以将它们用作静态幻灯片，并且您可以在前端做任何您想做的事
有关使用旋转滑块的更多信息，请阅读以下文档link： Revolution Slider Documentation