Я попытался создать карусель, используя glider.js из https://nickpiscitelli.github.io/Glider. JS /. Я выполнил все шаги, но это не работает. Не могли бы вы мне помочь? Я нажимаю на стрелку, и она не двигается.

<div class="glider-contain">

    <button class="glider-prev">
        <i class="fa fa-chevron-left"></i>        
    </button>



    <div class="glider">
        <div> <img src="./img/barcelona-img.png" alt="Barcelona"></div>

        <div> <img src="./img/madrid.png" alt="Madrid"></div>

        <div> <img src="./img/paris.png" alt="Paris"></div>

        <div> <img src="./img/paris.png" alt="Paris"></div>

        <div> <img src="./img/paris.png" alt="Paris"></div>
    </div>

    <button class="glider-next">
        <i class="fa fa-chevron-right"></i>        
   </button>


</div>

</div>

<script src="./glider.min.js"></script>
<script src="../index.js "></script>
<script>
    new Glider(document.querySelector('.glider'), {
        slidesToShow: 3,
        dragable: true,
        arrows: {
            prev: '.glider.prev',
            next: '.glider-next'
        }
    })
</script>
4
Jesús Bohorquez 22 Фев 2020 в 03:40

2 ответа

Лучший ответ

Проблемы в вашем коде:

  1. неверный класс для стрелки, .glider.prev вместо .glider-prev ;
  2. параметр dragable недопустим, вам нужно draggable;

  3. дополнительный закрывающий div </div> в конце разметки, не критично.

Для большей надежности вы можете обернуть инициализацию в window.addEventListener ('load', function() { ... }), хотя в вашем случае это не требуется, поскольку все готово до инициализации. Хотя автор предпочитает оборачивать https://nickpiscitelli.github.io/Glider.js/ (Вкладка «Использование»).

Вот пример минимальной рабочей конфигурации планера:

new Glider(document.querySelector('.glider'), {
   slidesToShow: 2,
   draggable: true,
   arrows: {
     prev: '.glider-prev',
     next: '.glider-next'
   },
   dots: '.dots'
 })
.wrapperForDemo {
  width: 500px;
  max-width: 80%;
  margin: 0 auto;
}
<link rel="stylesheet" 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>

<div class="wrapperForDemo">
  <div class="glider-contain">
    <div class="glider">
      <div><img src="https://placeimg.com/300/200/arch" alt="Barcelona"></div>
      <div><img src="https://placeimg.com/300/200/animals" alt="Barcelona"></div>
      <div><img src="https://placeimg.com/300/200/tech" alt="Barcelona"></div>
      <div><img src="https://placeimg.com/300/200/people" alt="Barcelona"></div>
    </div>

    <button role="button" aria-label="Previous" class="glider-prev">«</button>
    <button role="button" aria-label="Next" class="glider-next">»</button>
    <div role="tablist" class="dots"></div>
  </div>
</div>
2
bhoodream 26 Фев 2020 в 02:07

H, я пытаюсь загрузить файлы сценария до HTML-тела

Также вызвать Glide после того, как окно полностью загружено

window.addEventListener('load', function(){
  new Glider(document.querySelector('.glider'), {
        slidesToShow: 3,
        draggable: true,
        arrows: {
            prev: '.glider-prev',
            next: '.glider-next'
        }
    })
});
1
Rkv88 - Kanyan 22 Фев 2020 в 16:58