Как можно использовать Imageslider в javascript?

Question

У меня есть этот код, который реализует слайдер изображений в JavaScript, он работает хорошо (когда вы нажимаете на изображение на его слайдах), за исключением следующих проблем: 1: когда он достигает последнего изображения, он останавливается. Тем не менее, я хочу, чтобы l oop над ними как нон-стоп imageslider. 2: все изображения показаны на странице. Однако я хочу, чтобы они скрывали друг друга (то есть: при нажатии на изображение оно скользило, чтобы показать следующий), и я использовал overflow: hidden, но он не работает со мной.

 

        let liEls = document.querySelectorAll('ul li');
        let index = 0;
        
        window.show = function (increase) {
            
            index = index + increase;
           
            index = Math.min(Math.max(index, 0), liEls.length - 1);
     
            liEls[index].scrollIntoView({ behavior: 'smooth' });   
     

        }

    

    ul {
        display: flex;
        width: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        overflow: hidden;
  
    }

    li {
        position: relative;
        display: block;
        list-style: none;
     
        
    }


 

Answer 1

Чтобы переполнение работало, установите точную ширину ul. Кажется, что все изображения имеют ширину 600 пикселей, поэтому я установил ширину 600px. Края следующего / предыдущего изображения теперь не будут видны.

Существует несколько способов кодирования ползунка карусели. Обычный метод зацикливания заключается в клонировании и добавлении одного и того же набора изображений. Когда показывается вторая стопка, удалите первую стопку, а затем добавьте новую стопку в конце. Я предлагаю вам go с CSS переходами вместо метода scrollIntoView, добавить слушателей в transitionend и выполнить удаление / клонирование / добавление при возникновении этого события (ждать пока не закончится прокрутка).

 

        let liEls = document.querySelectorAll('ul li');
        let index = 0;
        
        window.show = function (increase) {
            
            index = index + increase;
           
            index = Math.min(Math.max(index, 0), liEls.length - 1);
     
            liEls[index].scrollIntoView({ behavior: 'smooth' });   
     

        }

    

    ul {
        display: flex;
        width: 600px;
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 1;
        overflow: hidden;
  
    }

    li {
        position: relative;
        display: block;
        list-style: none;
     
        
    }