Swiper не переключает слайды - PullRequest
Новая
       14

Swiper не переключает слайды

0 голосов
/ 16 апреля 2019

Я использую Swiper на странице, которую я создаю для художника, и я не очень хорошо разбираюсь в Javascript. Я загружаю файлы JavaScript Swiper из CDN по адресу:

https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js

Сайт создается локально, поэтому я не могу на него ссылаться. Я использую свернутый JQuery.

После сортировки нескольких неопределенных ошибок функций, я получил первый слайд, показанный на странице, вместе со стрелками навигации. Однако стрелки на самом деле ничего не делают, и слайды не скользят вообще, автоматически или с помощью навигационных стрелок.

Я следовал руководству " Начало работы со Swiper " на сайте Swiper.

Я искал Google, форумы Swiper и Stack Overflow, но не нашел ничего полезного. У меня были проблемы с типами MIME, я решил их. Но я не обнаружил, чтобы у кого-то возникали проблемы с отключением слайдов, поэтому я подозреваю, что проблема в том, что я плохо разбираюсь в JavaScript.

Одна проблема, с которой я столкнулся, заключалась в том, что я не мог использовать заполнитель jQuery ($), мне пришлось использовать jQuery вместо $, чтобы заставить слайдер отображаться вообще.

Я ожидаю, что изображения будут скользить автоматически и со стрелками навигации. Что происходит, так это то, что первое изображение отображается и не меняется даже со стрелками. 

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div id="content">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
    <div class="swiper-slide">4</div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

1 Ответ

0 голосов
/ 16 апреля 2019

Только некоторые незначительные проблемы:

  1. Контейнеру нужен класс "swiper-container".
    (Либо тот, либо селектор swiper должен быть #content.)

  2. Кнопки должны находиться за пределами оболочки.
    В вашем случае макет будет выглядеть так: 

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>
  1. «Направление» было установлено на «вертикаль».
    Я не уверен в вашем точном применении, но я изменил его на «горизонтальный» для этой демонстрации. 

var mySwiper = new Swiper('.swiper-container', {

  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?1" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?2" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?3" alt=""></div>
    <div class="swiper-slide"><img src="http://lorempixel.com/500/170/?4" alt=""></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
...