Как автоматически продвигать товары по клику?

Question

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

Пока мой код:

var n = $(".slider-slide-wrap").length,
    width = 500,
    newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
    width = 500,
    newwidth = width * n;
$('.slide-wrap').css({
    'width': newwidth
});
$('.slide-wrap2').css({
    'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
    var thiswid = 500;
    $(this).css({
       'left': thiswid * i
    });
});
$(".slider-slide-wrap2").each(function (i) {
    var thiswid = 500;
    $(this).css({
       'left': thiswid * i
    });
});
$('.slider-wrap2').scroll(function () {
  var scrollLeft = $(this).scrollLeft();
  $(".slider-slide-wrap2").each(function (i) {
      var posLeft = $(this).position().left
      var w = $(this).width();
     
      if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
        $(this).addClass('shown').siblings().removeClass('shown');
      }
  });
});
$('#end').click(function() {
  event.preventDefault();
  var $next = $('.slide-wrap .shown').next();
  var $next2 = $('.slide-wrap2 .shown').next();
  var curr = $('.rundown-items .current').parent(); //find .current's parent
  var $children = $('.rundown-items').children();
  var firstcal = $children.length;
  var actual = firstcal - 9;
  $children.each(function (i) {
    if (i < actual) {
      $(this).addClass('scrollup')
    }
  });
  setTimeout(function(){
    if ($next.length) {
      $('.slider-wrap').animate({
          scrollLeft: $next.position().left
      }, 0);
    } 
    if ($next2.length) {
      $('.slider-wrap2').animate({
          scrollLeft: $next2.position().left
      }, 200);
    }
    if (curr.next().length > 0) { 
      $('.rundown-items').animate({scrollTop: '+=35px'}, 400);
      curr.children('.current').contents().unwrap(); // remove .current
      curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
    };
  }, 150);
});

.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="end">End</button>

<div class="slider-wrap2">
    <div class="slide-wrap2">
       <div class="slider-slide-wrap2 shown"></div>
       <div class="slider-slide-wrap2">item 1</div>
       <div class="slider-slide-wrap2">item 2</div>
       <div class="slider-slide-wrap2">item 3</div>
       <div class="slider-slide-wrap2">item 4</div>
       <div class="slider-slide-wrap2">item 5</div>
    </div>
</div>

Answer 1

Вы можете вызвать событие click , проверив index текущего элемента:

.......
if ($next2.length) {
  $('.slider-wrap2').animate({
      scrollLeft: $next2.position().left
  }, 200);

  if($next2.index() <= 5)       // check the index
    $('#end').trigger('click'); // trigger the event     
}
.......

Кроме того, не забудьте передать событие в функции обратного вызова:

$('#end').click(function(event) {

var n = $(".slider-slide-wrap").length,
    width = 500,
    newwidth = width * n;
var n = $(".slider-slide-wrap2").length,
    width = 500,
    newwidth = width * n;
$('.slide-wrap').css({
    'width': newwidth
});
$('.slide-wrap2').css({
    'width': newwidth
});
$(".slider-slide-wrap").each(function (i) {
    var thiswid = 500;
    $(this).css({
       'left': thiswid * i
    });
});
$(".slider-slide-wrap2").each(function (i) {
    var thiswid = 500;
    $(this).css({
       'left': thiswid * i
    });
});
$('.slider-wrap2').scroll(function () {
  var scrollLeft = $(this).scrollLeft();
  $(".slider-slide-wrap2").each(function (i) {
      var posLeft = $(this).position().left
      var w = $(this).width();
     
      if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
        $(this).addClass('shown').siblings().removeClass('shown');
      }
  });
});
$('#end').click(function(event) {
  event.preventDefault();
  var $next = $('.slide-wrap .shown').next();
  var $next2 = $('.slide-wrap2 .shown').next();
  var curr = $('.rundown-items .current').parent(); //find .current's parent
  var $children = $('.rundown-items').children();
  var firstcal = $children.length;
  var actual = firstcal - 9;
  $children.each(function (i) {
    if (i < actual) {
      $(this).addClass('scrollup')
    }
  });
  setTimeout(function(){
    if ($next.length) {
      $('.slider-wrap').animate({
          scrollLeft: $next.position().left
      }, 0);
    } 
    if ($next2.length) {
      $('.slider-wrap2').animate({
          scrollLeft: $next2.position().left
      }, 200);
      if($next2.index() <= 5)
        $('#end').trigger('click');
    }
    if (curr.next().length > 0) { 
      $('.rundown-items').animate({scrollTop: '+=35px'}, 400);
      curr.children('.current').contents().unwrap(); // remove .current
      curr.next().wrapInner('<div class="current"></div>'); // add it to the next element
    };
  }, 150);
});

.slider-wrap2{position:relative;width:500px;height:60px;overflow-y:hidden;overflow-x:hidden;padding-top:5px;text-align:center;z-index:99999999999}
.slide-wrap2{position:relative;height:60px;top:0;left:0}
.slider-slide-wrap,.slider-slide-wrap2{position:absolute;width:500px;height:100%}
.shown .single {width:1024px;height:576px;overflow-y: scroll;overflow-x:hidden;padding:0 17px 0 0;box-sizing: content-box;margin:0}*/
.shown .single li{overflow-y: scroll;overflow-x:hidden;padding-right: 17px;box-sizing: content-box;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="end">End</button>

<div class="slider-wrap2">
    <div class="slide-wrap2">
       <div class="slider-slide-wrap2 shown"></div>
       <div class="slider-slide-wrap2">item 1</div>
       <div class="slider-slide-wrap2">item 2</div>
       <div class="slider-slide-wrap2">item 3</div>
       <div class="slider-slide-wrap2">item 4</div>
       <div class="slider-slide-wrap2">item 5</div>
    </div>
</div>