Swiper pagination not showing

Question

First time using swiper ,I followed the documentation and added the html part in my code ,then initialize it in JS, I initialize pagination but it is not showing on my page. This is my code:

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>

can someone explain me what am I doing wrong I get the pagination element height and width in px ?

Solution 1

Post is old, but still don't have correct answer, so:

You need to import modules.

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

Docs: https://swiperjs.com/get-started/

Solution 2

if you are not using it with webpack and and transpiler then you cannot use require. you will have to use the cdn or you can download the scripts and use them.

$(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>