CODEWITHSUNDEEP
jqueryswiper.js
Fulvio
Fulvio

Reputation: 239

Swiper pagination not showing

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 ?

Upvotes: 11

Views: 45577

Answers (7)

Saint
Saint

Reputation: 31

For React, you need to import the bundled css file.

import "swiper/swiper-bundle.css";

Upvotes: 3

skillz TheProgrammer
skillz TheProgrammer

Reputation: 11

use 'import 'swiper/modules/pagination/pagination.scss' instead of this 'swiper/css/pagination'

for some reason you dont download the css module even when you install the same version.

but this works!!

Upvotes: 0

Rowin_nb2
Rowin_nb2

Reputation: 322

If importing Pagination and Navigation does not fix the issue for you, like mentioned above. Make sure you also have an empty div tag with the class swiper-pagination.

Like so:

<div class="rewards-swiper">
  <div class={swiperClass} ref={el => this.swiperRef = el}>
    <div class="swiper-wrapper">
      <slot />
    </div>
    <div class="swiper-pagination" />    <-- here
  </div>
</div>

Upvotes: 0

Өлзийбат Нансалцог
Өлзийбат Нансалцог

Reputation: 151

Please add clickable value.

pagination: { el: '.swiper-pagination', clickable: true }

Upvotes: 2

Gayathri n
Gayathri n

Reputation: 11

import "swiper/components/pagination/pagination.scss";

put this it will work

Upvotes: 1

jsite-pl
jsite-pl

Reputation: 631

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/

Upvotes: 57

anees
anees

Reputation: 1855

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>

Upvotes: 4

Related Questions