Как переместить слайдер на основе слайдов, а не на основе пикселей на основе Glider js | Javascript - PullRequest
Новая
       0

Как переместить слайдер на основе слайдов, а не на основе пикселей на основе Glider js | Javascript

0 голосов
/ 25 февраля 2020

Я использую Glider. js в моем проекте. Он отлично работает в соответствии с моим требованием, но только когда я перетаскиваю / проводя пальцем по сенсорному экрану, он двигается как прокрутка.

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

вот демо-ссылка Glider. js

здесь Github file

здесь работает демоверсия 

* {
            box-sizing: border-box
        }
        html, body {
            width: 100%;
            overflow: hidden;
        }
        .glider{
            overflow: hidden;
        }
        .glider-contain {
            width: 90%;
            max-width: 997px;
            margin: 0 auto;
        }
        .glider-slide {
            min-height: 150px;
        }
        .glider-slide img {
            width: 100%;
        }
<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style type="text/css">@-ms-viewport{width:auto!important;}</style>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
    <script>
      window.addEventListener('load',function(){

        window._ = new Glider(document.querySelector('.glider'), {
            slidesToShow: 5, //'auto',
            slidesToScroll: 1,
            itemWidth: 150,
            draggable: true,
            scrollLock: false,
            rewind: false,
            arrows: {
                prev: '.glider-prev',
                next: '.glider-next'
            }
        });
          
      });
    </script>
  </head>
  <body>
    <div class="glider-contain">
        <div class="glider">
            <div><img alt="Test" src="http://placehold.it/300x300?text=1"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=2"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=3"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=4"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=5"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=6"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=7"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=8"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=9"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=10"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=11"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=12"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=13"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=14"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=15"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=16"></div>
        </div>
        <button class="glider-prev">&laquo;</button>
        <button class="glider-next">&raquo;</button>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 25 февраля 2020

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

это может сделать трюк 

scrollLock : true

Если значение истинно, Glider. js прокрутит до ближайшего скользить после любых взаимодействий прокрутки 

glider.scrollTo(pixelOffset);

. Он будет прокручиваться непосредственно в положение прокрутки в пикселях

Надеюсь, что это может быть полезно для кого-то еще.

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

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

...