Блог

Я пытаюсь создать что-то вроде многоэлементной карусели:

Я реализовал left и right, но у меня проблемы с auto:

 function addCarouselListener() {
            data.forEach(function (carousel) {
                carousel.previous.addEventListener('click', moveLeft);
                carousel.next.addEventListener('click', moveRight);
            });
        }


        function autoslide() {
            var max =10, visible=6, count=visible;
            max = 10

            while (count < max) {
              moveRight();
                count  =1;
            }

           if (count=max)  // go back
            while(count > visible) { 
            moveLeft( )
            count -=1;
  

}

Во-первых, это на самом деле работает не всегда, мне нужно всегда работать и иметь таймер. Во-вторых, мне нужно сделать паузу, если пользователь нажимает влево, вправо (предыдущий / следующий).

Пожалуйста, не присылайте мне ссылки на уже готовые скрипты, потому что я хочу разобраться, плюс мне нужно что-то более пользовательское.

Я могу четко сказать вам, что эта строка работает не так, как вы ожидаете :

if (count = max)

Чтобы сравнить равенство между двумя переменными, вы должны использовать == or === , если вы хотите также сравнить их тип.

Также, если вы просто сделаете это вот так, ползунок будет зацикливаться так быстро, что ваш браузер, вероятно, вылетит.

Вы хотите использовать setInterval()

Вот простой, не проверенный пример :

 var direction = 'right'
var current_position = 0
var max = 10
var delay = 500
var timer = false

function move_slider(){
    if(direction == 'right')
        current_position  = 1
    if(direction == 'left')
        current_position -= 1

    // move the slider
}

function auto_slide(){
    console.log(current_position, direction)
    move_slider()

    if(current_position <= 0)
        direction = 'right'
    if(current_position >= max)
        direction = 'left'
}

function set_auto_mode(){
  timer = window.setInterval(auto_slide, delay) 
}

function unset_auto_mode(){
  window.clearInterval(timer)
  timer = false
}