滑块图像循环不工作

时间:2016-08-15 12:51:29

标签: jquery html html5 revolution-slider

你能帮我解决一下如何从滑块上创建图像,图像1.jpg和2.jpg加载一次,2a,2b,3.jpg将继续加载。所以循环应该看起来像1,2,2a,2b,3.jpg当它再次循环时它是2a,2b,3.jpg。希望你提前感谢我帮助

这是代码。

<section id="slider" class="slider-parallax revslider-wrap clearfix">
            <div class="slider-parallax-inner">

                <div class="tp-banner-container rev_slider_wrapper fullscreen-container">
                    <div class="tp-banner" >
                        <ul>    <!-- SLIDE  -->

                            <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/slider/rev/main/1.jpg"  data-saveperformance="off"  data-title="" >
                                <img src="images/slider/rev/main/1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>

                                    <!-- LAYER NR. 1 -->
                                    <div class="tp-fade fadeout fullscreenvideo rs-background-video-layer"
                                        data-forcerewind="on"
                                        data-volume="mute"
                                        data-videowidth="100%"
                                        data-videoheight="100%"
                                        data-videomp4="images/upcnew.mp4"
                                        data-videopreload="preload"
                                        data-videoloop="none"
                                        data-forceCover="1"
                                        data-aspectratio="16:9"
                                        data-autoplay="true"
                                        data-autoplayonlyfirsttime="false"
                                        data-nextslideatend="true"
                                        >
                                    </div>

                            </li>

                            <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2.jpg" data-delay="3000" data-saveperformance="off" data-title="">

                                <img src="images/slider/rev/main/2.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >

                            </li>

                            <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2a.jpg" data-delay="3000" data-saveperformance="off" data-title="">

                                <img src="images/slider/rev/main/2a.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >

                            </li>

                            <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/2b.jpg" data-delay="3000" data-saveperformance="off" data-title="">

                                <img src="images/slider/rev/main/2b.jpg"  alt="kenburns6"  data-bgposition="right center" data-kenburns="on" data-duration="3000" data-delay="3000" data-ease="Linear.easeNone" >

                            </li>

                            <li class="tp-fade fadeout" data-transition="slideup" data-slotamount="1" data-masterspeed="1500" data-thumb="images/slider/rev/main/3.jpg" data-delay="5000"  data-saveperformance="off"  data-title="">

                                <img src="images/slider/rev/main/3.jpg"  alt="kenburns6"  data-bgposition="left top" data-kenburns="on" data-duration="5000" ata-delay="5000" data-ease="Linear.easeNone" >

                                <!-- scroll down -->    
                                <a href="#" data-scrollto="#section-about" class="one-page-arrow dark">
                                    <i class="icon-angle-down infinite animated fadeInDown"></i>
                                </a>
                            </li>
                        </ul>

                    </div>


                </div>

            </div>


        </section>

JQUERY

<script type="text/javascript">

    var tpj=jQuery;
    tpj.noConflict();

    tpj(document).ready(function() {

        var apiRevoSlider = tpj('.tp-banner').show().revolution(
        {
            sliderType:"standard",
            jsFileLocation:"include/rs-plugin/js/",
            sliderLayout:"fullscreen",
            dottedOverlay:"none",
            delay:9000,
            responsiveLevels:[1200,992,768,480,320],
            startwidth:1140,
            startheight:600,
            hideThumbs:200,

            thumbWidth:100,
            thumbHeight:50,
            thumbAmount:3,

            navigation: {
                keyboardNavigation:"off",
                keyboard_direction: "horizontal",
                mouseScrollNavigation:"off",
                onHoverStop:"off",
                touch:{
                    touchenabled:"on",
                    swipe_threshold: 75,
                    swipe_min_touches: 1,
                    swipe_direction: "horizontal",
                    drag_block_vertical: false
                },
                arrows: {
                   /* style: "hermes",
                    enable: true,*/
                    hide_onmobile: false,
                   /* hide_onleave: false,*/
                   /* tmp: '<div class="tp-arr-allwrapper"> <div class="tp-arr-imgholder"></div>    <div class="tp-arr-titleholder">{{title}}</div> </div>',*/
                    left: {
                       /* h_align: "left",
                        v_align: "center",
                        h_offset: 10,
                        v_offset: 0*/
                    },
                    right: {
                       /* h_align: "right",
                        v_align: "center",
                        h_offset: 10,
                        v_offset: 0*/
                    }
                }
            },

            touchenabled:"on",
            onHoverStop:"on",

            swipe_velocity: 0.7,
            swipe_min_touches: 1,
            swipe_max_touches: 1,
            drag_block_vertical: false,


            parallax:"mouse",
            parallaxBgFreeze:"on",
            parallaxLevels:[8,7,6,5,4,3,2,1],
            parallaxDisableOnMobile:"on",

            keyboardNavigation:"on",

            shadow:0,
            fullWidth:"off",
            fullScreen:"on",

            spinner:"spinner0",

            stopLoop:"off",
            stopAfterLoops:-1,
            stopAtSlide:-1,

            shuffle:"off",


            forceFullWidth:"off",
            fullScreenAlignForce:"off",
            minFullScreenHeight:"400",

            hideThumbsOnMobile:"off",
            hideNavDelayOnMobile:1500,
            hideBulletsOnMobile:"off",
            hideArrowsOnMobile:"off",
            hideThumbsUnderResolution:0,

            hideSliderAtLimit:0,
            hideCaptionAtLimit:0,
            hideAllCaptionAtLilmit:0,
            startWithSlide:0,
            fullScreenOffset:"0px"
        });

        apiRevoSlider.bind("revolution.slide.onloaded",function (e) {
            setTimeout( function(){ SEMICOLON.slider.sliderParallaxDimensions(); }, 200 );
        });

        apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {
            SEMICOLON.slider.revolutionSliderMenu();
        });

    }); //END REVOLUTION SLIDER

</script>

0 个答案:

没有答案