Создание простого чистого слайдера Javascript для прокрутки для мобильных устройств

Question

Я хочу создать что-то похожее на слайдер Google для изображений при поиске на экранах небольшого размера. Просто уменьшите ширину браузера или зайдите на него с мобильного, а затем введите «изображение» в поле поиска Google, например. Вы увидите 3 изображения. под окном поиска Google, которое вы можете скользить, чтобы показать больше изображений.

Таким образом, будет около 6 изображений рядом, но 2 полностью показаны и около половины 3-го изображения, в то время как 3 других будут скрыты.

Когда пользователь проведет пальцем влево 3-е изображение, а остальные 3 станут видимыми, Пользователь все равно может провести пальцем вправо, чтобы показать первые изображения, если он уже проведен пальцем влево.

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

Вот что я пробовал до сих пор:

var ImageIndex = 0;

function swipe(event){
    var touch = event.targetTouches[0];
    var midpoint = Math.floor(screen.width/2);
    var px = touch.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex]; 
    if(px < midpoint){
        itemActive.style.marginLeft = '-100%';
        itemActive.style.transition = '1s';
        if (ImageIndex < items.length) {
            ImageIndex = ImageIndex + 1;
        }else{
            ImageIndex = 0;
        }
    }else{
        itemActive.style.marginLeft = '0px';
        itemActive.style.transition = '1s';
        if (ImageIndex >= 1 ) {
            ImageIndex = ImageIndex - 1;
        }else{
            ImageIndex = 0;
        }
    }
}

CSS:

.images-gallary{
    background-color: #000;
    overflow: hidden;
    height: 73px;
    white-space: nowrap;
}

.image-wrapper{
    width: 100%;
    display: inline-block;
    text-align: center;
}

#secondItem{
    background: #fff;
}

HTML:

<div class="images-gallary" ontouchmove="swipe(event)">
    <div class="image-wrapper" id="firstItem">
        <img class="image" src="http://placehold.it/73/200">
    </div>
    <div class="image-wrapper" id="secondItem">
        <img class="image" src="http://placehold.it/73/300">
    </div>
    <div class="image-wrapper">
        <img class="image" src="http://placehold.it/73/400">
    </div>
</div> <!-- .images-gallary -->

Этот код просто сдвиньте первые 2 изображения, и я получаю сообщение об ошибке:

Uncaught TypeError: Cannot read property 'style' of undefined

Так как настроить этот код для работы, как указано выше?

Я не хочу использовать Jquery или какие-либо библиотеки, просто чистый код JS.

Answer 1

Замените ваше первое условие ImageIndex < items.length на ImageIndex < (items.length - 1), поскольку общая длина изображений здесь равна 3, и вы пытаетесь получить доступ к стилю items[3] (undefined)

if (ImageIndex < (items.length - 1)) {
   ImageIndex = ImageIndex + 1;
}else {
   ImageIndex = 0;
}

и еще одна вещь во 2-м условии, вы должны заменить ImageIndex = 0; на ImageIndex = items.length - 1; в другом состоянии, потому что всегда инициализируете одно и то же значение ImageIndex = 0; в случае px > midpoint и ImageIndex < 1

if (ImageIndex >= 1 ) {
   ImageIndex = ImageIndex - 1;
}else {
   ImageIndex = items.length-1;
}

Ваш окончательный код выглядит следующим образом:

var ImageIndex = 0;

function swipe(event){
    var touch = event.targetTouches[0];
    var midpoint = Math.floor(screen.width/2);
    var px = touch.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex]; 
    if(px < midpoint){
        itemActive.style.marginLeft = '-100%';
        itemActive.style.transition = '1s';
        if (ImageIndex < (items.length - 1)) {
            ImageIndex = ImageIndex + 1;
        }else{
            ImageIndex = 0;
        }
    }else{
        itemActive.style.marginLeft = '0px';
        itemActive.style.transition = '1s';
        if (ImageIndex >= 1 ) {
            ImageIndex = ImageIndex - 1;
        }else{
            ImageIndex = items.length - 1;
        }
    }
}

Answer 2

Так что проблема в вашем случае заключается в этом условии if (ImageIndex < items.length) {. У вас есть общее количество 3 элементов, поэтому, когда ImageIndex равно 2, оно увеличит его до 3, и, поскольку у вас есть 3 изображения в html items[ImageIndex], будет возвращено неопределенное значение.

Поэтому измените условие на if (ImageIndex < items.length - 1) {.