как остановить цикл на этом слайдере

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; 
}; 

});