Добавить функцию авто слайдов в нижнем фрагменте

Question

Я нашел этот фрагмент в Интернете для отзывчивого слайдера изображений, все отлично работает, но мне нужно добавить функции автоматического слайда, я новичок в области jquery, поэтому вам не нужна небольшая помощь.

$(document).ready(function(){ 
    var $slider = $('.slider'); 
    var $slideBox = $slider.find('.slide-box'); 
    var $leftControl = $slider.find('.slide-left'); 
    var $rightControl = $slider.find('.slide-right'); 
    var $slides = $slider.find('.slide'); 
    var numItems = $slider.find('.slide').length; 
    var position = 0; 

    /*on click functionality */ 
    var windowWidth = $(window).width(); 
    $slides.width(windowWidth); 
    $leftControl.on('click', function(){ 
     var width = $slider.width(); 
     position = position - 1 >= 0 ? position - 1 : numItems - 1; 
     if(position != numItems-1){ 
      $slider.find('.slide').eq(position + 1).css('margin-left', 0); 
     } 
     else{ 
      $slider.find('.slide:gt(0)').each(function(index){ 
       $(this).css('margin-left', width * -1 + 'px'); 
      }); 
     } 
    }); 

    $rightControl.on('click', function(){ 
     var width = $slider.width(); 
     position = position + 1 < numItems ? position + 1 : 0; 
     if(position != 0){ 
      $slider.find('.slide').eq(position).css('margin-left', width * -1 + 'px'); 
     } 
     else{ 
      $slider.find('.slide').css('margin-left', 0); 
     } 
    }); 

    $(window).resize(function(){ 
     $slides.width($(window).width()).height($(window).height); 
    }); 
}) 

Answer 1

Можете ли вы попробовать с этим модифицированным кодом:

Пожалуйста, измените var autoSlideTime согласно вашему требованию.

$(document).ready(function(){ 
    var $slider = $('.slider'); 
    var $slideBox = $slider.find('.slide-box'); 
    var $leftControl = $slider.find('.slide-left'); 
    var $rightControl = $slider.find('.slide-right'); 
    var $slides = $slider.find('.slide'); 
    var numItems = $slider.find('.slide').length; 
    var position = 0; 
    var autoSlideTime = 5000; //auto slide after 5 seconds 

    /*on click functionality */ 
    var windowWidth = $(window).width(); 
    $slides.width(windowWidth); 
    $leftControl.on('click', function(){ 
     clearInterval(slideInterval); 
     var width = $slider.width(); 
     position = position - 1 >= 0 ? position - 1 : numItems - 1; 
     if(position != numItems-1){ 
      $slider.find('.slide').eq(position + 1).css('margin-left', 0); 
     } 
     else{ 
      $slider.find('.slide:gt(0)').each(function(index){ 
       $(this).css('margin-left', width * -1 + 'px'); 
      }); 
     } 
     AutoSlide(); 
    }); 

    $rightControl.on('click', function(){ 
     clearInterval(slideInterval); 
     var width = $slider.width(); 
     position = position + 1 < numItems ? position + 1 : 0; 
     if(position != 0){ 
      $slider.find('.slide').eq(position).css('margin-left', width * -1 + 'px'); 
     } 
     else{ 
      $slider.find('.slide').css('margin-left', 0); 
     } 
     AutoSlide(); 
    }); 

    $(window).resize(function(){ 
     $slides.width($(window).width()).height($(window).height); 
    }); 

    //functionality for autoslide 
    var slideInterval = null; 
    function AutoSlide(){ 
     slideInterval = setInterval(function(){ 
      $rightControl.click(); 
     },autoSlideTime); 
    } 
    AutoSlide(); 

})