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

Я использую Swiper на странице, которую создаю для художника, и у меня плохо получается Javascript. Я загружаю файлы Swiper JavaScript из 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>


javascript jquery swiper
person Eric Newcomb    schedule 16.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Просто некоторые мелочи:

  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>

person showdev    schedule 16.04.2019