Блог

Я использую 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>  

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

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>
  

3. «Направление» было установлено на «вертикальное».
   Я не уверен в вашем точном применении, но я изменил его на «горизонтальное» для этой демонстрации.

 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>