Чистый Javascript слайдер на пальце для мобильного - PullRequest
Новая
       0

Чистый Javascript слайдер на пальце для мобильного

0 голосов
/ 11 ноября 2018

У меня есть около 6 изображений, для которых я хотел бы создать слайдер для мобильных устройств, только для небольших экранов.

Я искал об этом, и большинство ответов были некоторые библиотеки и Jquery, но я хочу, чтобы это было в чистом Javascript без каких-либо библиотек.

Я создал скрипку того, что попробовал. Это очень простой фрагмент, который перемещает первое изображение влево при пролистывании, а затем перемещает его обратно в предыдущую позицию: http://jsfiddle.net/dkmp5h1L/3/

Вот код: JS код: 

function swipe(event){
    var midpoint = Math.floor(screen.width/2),
        touch = event.targetTouches[0],
        px = touch.pageX,
        firstItem = document.getElementById('firstItem'); 
    if(px > midpoint){
        firstItem.style.marginLeft = '-100%';
        firstItem.style.transition = '1s ';
    }else{
        firstItem.style.marginLeft = '0';
        firstItem.style.transition = '1s ';          
    }
}

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 -->

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

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

Как этого добиться?

1 Ответ

0 голосов
/ 11 ноября 2018

Иметь доступ к текущему активному слайду и добавлять CSS соответственно. Я пробовал пример кода, и он, кажется, работает. Проверьте это. 

        <!DOCTYPE html>
            <html lang="en">
                <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
    .images-gallary{
        overflow: hidden;
        height: 73px;
        white-space: nowrap;
    }

    .image-wrapper{
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    #firstItem {
        background: #a8a8a8;
    }
    #secondItem{
        background: #c8c8c8;
    }
    #thirdItem{
        background: #d8d8d8;
    }
</style>
</head>
<body>
<div class="images-gallary">
  <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" id="thirdItem">
    <img class="image" src="http://placehold.it/73/400" />
  </div>
</div>
<button onClick="swipe(event, 'left')">left</button>
<button onClick="swipe(event, 'right')">right</button>
<script>
        var ImageIndex = 0;
        function swipe(event, direction){
            var midpoint = Math.floor(screen.width/2);
            var px = event.pageX;
            var items = document.getElementsByClassName('image-wrapper');
            var itemActive = items[ImageIndex]; 
            if (direction === 'left') {
                itemActive.style.marginLeft = '-100%';
                itemActive.style.transition = '1s ';
                ImageIndex = ImageIndex < items.length - 1 ? ImageIndex + 1 : ImageIndex;
            }else{
                itemActive.style.marginLeft = '0';
                itemActive.style.transition = '1s ';
                ImageIndex = ImageIndex >= 1 ? ImageIndex - 1 : 0;
            }
        }
</script>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...