如何在此滑块上停止循环

Question

我正在使用此滑块到我的网站。一切都很顺利。它会自动从头到尾播放幻灯片，在完成第一个循环后，它会再次滑动。我想停止滑动循环。 我想在这个滑块上停止自动循环。 请帮我。 我附上了我的js代码。 http://codyhouse.co/gem/hero-slider/

    jQuery(document).ready(function($){
var slidesWrapper = $('.cd-hero-slider');
if ( slidesWrapper.length > 0 ) {
    var primaryNav = $('.cd-primary-nav'),
        sliderNav = $('.cd-slider-nav'),
        navigationMarker = $('.cd-marker'),
        slidesNumber = slidesWrapper.children('li').length,
        visibleSlidePosition = 0,
        autoPlayId,
        autoPlayDelay = 5000;

    uploadVideo(slidesWrapper);

    setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

    primaryNav.on('click', function(event){
        if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
    });

    sliderNav.on('click', 'li', function(event){
        event.preventDefault();
        var selectedItem = $(this);
        if(!selectedItem.hasClass('selected')) {
            var selectedPosition = selectedItem.index(),
                activePosition = slidesWrapper.find('li.selected').index();

            if( activePosition < selectedPosition) {
                nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
            } else {
                prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
            }

            visibleSlidePosition = selectedPosition;

            updateSliderNavigation(sliderNav, selectedPosition);
            updateNavigationMarker(navigationMarker, selectedPosition+1);
            setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
        }
    });
}

function nextSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
    checkVideo(visibleSlide, container, n);
}

function prevSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
    checkVideo(visibleSlide, container, n);
}

function updateSliderNavigation(pagination, n) {
    var navigationDot = pagination.find('.selected');
    navigationDot.removeClass('selected');
    pagination.find('li').eq(n).addClass('selected');
}

function setAutoplay(wrapper, length, delay) {
    if(wrapper.hasClass('autoplay')) {
        clearInterval(autoPlayId);
        autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
    }
}

function autoplaySlider(length) {
    if( visibleSlidePosition < length - 1) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
        visibleSlidePosition +=1;
    } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
        visibleSlidePosition = 0;
    }
    updateNavigationMarker(navigationMarker, visibleSlidePosition+1);
    updateSliderNavigation(sliderNav, visibleSlidePosition);
}

function uploadVideo(container) {
    container.find('.cd-bg-video-wrapper').each(function(){
        var videoWrapper = $(this);
        if( videoWrapper.is(':visible') ) {
            var videoUrl = videoWrapper.data('video'),
                video = $('<video loop><source src="'+videoUrl+'.mp4" type="video/mp4" /><source src="'+videoUrl+'.webm" type="video/webm" /></video>');
            video.appendTo(videoWrapper);
            if(videoWrapper.parent('.cd-bg-video.selected').length > 0) video.get(0).play();
        }
    });
}

function checkVideo(hiddenSlide, container, n) {
    var hiddenVideo = hiddenSlide.find('video');
    if( hiddenVideo.length > 0 ) hiddenVideo.get(0).pause();

    var visibleVideo = container.children('li').eq(n).find('video');
    if( visibleVideo.length > 0 ) visibleVideo.get(0).play();
}

function updateNavigationMarker(marker, n) {
    marker.removeClassPrefix('item').addClass('item-'+n);
}

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

}）;

<section class="cd-hero">
    <ul class="cd-hero-slider autoplay">
        <!-- <li class="selected">
            <div class="cd-full-width">
                <h2>SLider Title 1</h2>
                <p>Lorem ipsum dolor sit amet.</p>
                <a href="#" class="cd-btn">Article &amp; Download</a>
            </div>
        </li> -->

        <li class="selected">
            <div class="cd-half-width">
                <!-- <h2>Slide title here</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p>
                <a href="#0" class="cd-btn">Start</a>
                <a href="#0" class="cd-btn secondary">Learn More</a> -->
                <img src="img/slider-logo-1.png" alt="">
                <img src="img/slider-logo-2.png" alt="">
                <img src="img/slider-logo-3.png" alt="">
            </div>

            <div class="cd-half-width cd-img-container">
                <img src="img/led.jpg" alt="tech 1">
            </div> 
        </li>

        <!-- <li>
            <div class="cd-half-width cd-img-container">
                <img src="assets/tech-2.jpg" alt="tech 2">
            </div> 

            <div class="cd-half-width">
                <h2>Slide title here</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p>
                <a href="#0" class="cd-btn">Start</a>
                <a href="#0" class="cd-btn secondary">Learn More</a>
            </div> 

        </li> -->

        <li class="cd-bg-video">
            <div class="cd-full-width">
                <h2>Slide title here</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
                <a href="#0" class="cd-btn">Learn more</a>
            </div> <!-- .cd-full-width -->

            <div class="cd-bg-video-wrapper" data-video="assets/video/video">
                <!-- video element will be loaded using jQuery -->
            </div> <!-- .cd-bg-video-wrapper -->
        </li>

        <li>
            <div class="cd-full-width">
                <h2>wow</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
                <a href="#0" class="cd-btn">Start</a>
                <a href="#0" class="cd-btn secondary">Learn More</a>
            </div> <!-- .cd-full-width -->
        </li>
    </ul> <!-- .cd-hero-slider -->

    <div class="cd-slider-nav">
        <nav>
            <span class="cd-marker item-1"></span>

            <ul>
                <li class="selected"><a href="#0">Intro</a></li>
                <!-- <li><a href="#0">Tech 1</a></li>
                <li><a href="#0">Tech 2</a></li> -->
                <li><a href="#0">Video</a></li>
                <li><a href="#0">Image</a></li>
            </ul>
        </nav> 
    </div> <!-- .cd-slider-nav -->
</section>

Answer 1

jQuery(document).ready(function($){


var slidesWrapper = $('.cd-hero-slider');
if ( slidesWrapper.length > 0 ) {
    var primaryNav = $('.cd-primary-nav'),
        sliderNav = $('.cd-slider-nav'),
        navigationMarker = $('.cd-marker'),
        slidesNumber = slidesWrapper.children('li').length,
        visibleSlidePosition = 0,
        autoPlayId,
        autoPlayDelay = 5000;

    slidesWrapper.find('li').on('webkitTransitionEnd.a otransitionend.a oTransitionEnd.a msTransitionEnd.a transitionend.a', function(){
        if($(this).is(':last-child') && $(this).is('.selected')){
            slidesWrapper.removeClass('autoplay');
        }
    });

    sliderNav.find('li:first-child').on('click', function(){
        slidesWrapper.addClass('autoplay');
        setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
    });

    uploadVideo(slidesWrapper);

    setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);

    primaryNav.on('click', function(event){
        if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
    });

    sliderNav.on('click', 'li', function(event){
        event.preventDefault();
        var selectedItem = $(this);
        if(!selectedItem.hasClass('selected')) {
            var selectedPosition = selectedItem.index(),
                activePosition = slidesWrapper.find('li.selected').index();

            if( activePosition < selectedPosition) {
                nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
            } else {
                prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
            }

            visibleSlidePosition = selectedPosition;

            updateSliderNavigation(sliderNav, selectedPosition);
            updateNavigationMarker(navigationMarker, selectedPosition+1);
            setAutoplay(slidesWrapper, slidesNumber, autoPlayDelay);
        }
    });
}

function nextSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
    checkVideo(visibleSlide, container, n);
}

function prevSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
    checkVideo(visibleSlide, container, n);
}

function updateSliderNavigation(pagination, n) {
    var navigationDot = pagination.find('.selected');
    navigationDot.removeClass('selected');
    pagination.find('li').eq(n).addClass('selected');
}

function setAutoplay(wrapper, length, delay) {
    if(wrapper.hasClass('autoplay')) {
        clearInterval(autoPlayId);
        autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
    }
}

function autoplaySlider(length) {
    if(!slidesWrapper.hasClass('autoplay')){
        return clearInterval(autoPlayId);
    }
    if( visibleSlidePosition < length - 1) {
        nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
        visibleSlidePosition +=1;
    } else {
        prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
        visibleSlidePosition = 0;
    }
    updateNavigationMarker(navigationMarker, visibleSlidePosition+1);
    updateSliderNavigation(sliderNav, visibleSlidePosition);
}

function uploadVideo(container) {
    container.find('.cd-bg-video-wrapper').each(function(){
        var videoWrapper = $(this);
        if( videoWrapper.is(':visible') ) {
            var videoUrl = videoWrapper.data('video'),
                video = $('<video loop><source src="'+videoUrl+'.mp4" type="video/mp4" /><source src="'+videoUrl+'.webm" type="video/webm" /></video>');
            video.appendTo(videoWrapper);
            if(videoWrapper.parent('.cd-bg-video.selected').length > 0) video.get(0).play();
        }
    });
}

function checkVideo(hiddenSlide, container, n) {
    var hiddenVideo = hiddenSlide.find('video');
    if( hiddenVideo.length > 0 ) hiddenVideo.get(0).pause();

    var visibleVideo = container.children('li').eq(n).find('video');
    if( visibleVideo.length > 0 ) visibleVideo.get(0).play();
}

function updateNavigationMarker(marker, n) {
    marker.removeClassPrefix('item').addClass('item-'+n);
}

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = $.trim(classes.join(" "));
    });
    return this;
};

}）;