Swiper нумерация страниц не отображается - PullRequest
Новая
       6

Swiper нумерация страниц не отображается

1 голос
/ 27 января 2020

Впервые используя swiper, я следовал документации и добавил часть html в свой код, затем инициализировал ее в JS, я инициализирую нумерацию страниц, но она не отображается на моей странице. Это мой код:

JS: 

var Swiper = require('swiper');
   $(document).ready(() => {
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        }
      });
    });

HTML: 

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
   </div>

Может кто-нибудь объяснить мне, что я делаю неправильно, я получил нумерацию страниц высота и ширина элемента в пикселях?

1 Ответ

0 голосов
/ 27 января 2020

если вы не используете его с веб-пакетом и транспайлером, вы не можете использовать require. вам придется использовать CDN или вы можете скачать сценарии и использовать их. 

$(document).ready(() => {
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      }
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
...