停止滑出viweport

时间:2018-06-05 19:21:39

标签: javascript sliders

您好我的网站上有一对滑块,但是当我向下滚动滑块时,我会伪造第一张幻灯片信息..基于this question

但我为我修改脚本但不起作用。 :( 有谁可以帮助我?

在视口外输出时停止滑块的脚本

    jQuery(window).scroll(function($) {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


    if (isScrolledIntoView($('.tie-slick-slider-wrapper'))){
        $('.tie-slick-slider-wrapper').sliderElm.attr({data-autoplay: false});
    } else {
        $('.tie-slick-slider-wrapper').sliderElm.attr({data-autoplay: true});
    }

});

并且有滑块的配置。

jQuery('.tie-slick-slider-wrapper').each( function(){

        var sliderElm     = jQuery(this),
                sliderId      = sliderElm.attr( 'id' ),
                slickSlider   = sliderElm.find( '.tie-slick-slider' ),
                autoPlay      = sliderElm.attr( 'data-autoplay' ) ? true : false,
                sliderNum     = sliderElm.attr( 'data-slider-id' ),
                sliderSpeed   = sliderElm.attr( 'data-speed' ),
                twoColLayout  = sliderElm.parents('.section-item').hasClass('has-sidebar')? true : false,
                containerFull = sliderElm.parents('.section-wrapper').hasClass('container-full')? true : false;

        // Default values
        var sliderOpt = {
            centerMode    : false,
            infinite      : false,
            slidesToShow  : 1,
            slidesToScroll: 1,
            slidesOn1280  : 1,
            slidesOn1024  : 1,
            slidesOn992   : 1,
            slidesOn768   : 1,
            slidesOn670   : 1,
            slidesOn550   : 1,
            slidesOn390   : 1,
            showDots      : false,
            showDotsOn1280: false,
            showDotsOn1024: false,
            showDotsOn992 : false,
            showDotsOn768 : false,
            showDotsOn670 : false,
            showDotsOn550 : false,
            showDotsOn390 : false,
            showArrows      : true,
            showArrowsOn1280: true,
            showArrowsOn1024: true,
            showArrowsOn992 : true,
            showArrowsOn768 : true,
            showArrowsOn670 : true,
            showArrowsOn550 : true,
            showArrowsOn390 : true,
            prevArrow : '<li><span class="fa fa-angle-left"></span></li>',
            nextArrow : '<li><span class="fa fa-angle-right"></span></li>',
        };

0 个答案:

没有答案