将 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