CODEWITHSUNDEEP
htmljqueryswiper.js
Тахир Мухаметов
Тахир Мухаметов

Reputation: 95

jQuery.Swiper.js pagination not working, how to setup?

Slider works but pagination is not visible

HTML:

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
      <div class="swiper-slide">
        <img class="swiper-img" src="/assets/img.png" />
      </div>
    </div>
    <div class="swiper-pagination"></div>

JS:

$(document).ready(() => {
  var swiper = new Swiper(".swiper-container", {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + "</span>";
          },
        },
      });
    })

enter image description here

The scripts are connected, the slider works. But we see that there is simply no pagination, and it's not about styles

Upvotes: 1

Views: 2181

Answers (2)

Oğuzhan Bostancı
Oğuzhan Bostancı

Reputation: 1

<div style="height:100%">
<div class="swiper swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">IMAGE 1</div>
    <div class="swiper-slide">IMAGE 2</div>
    <div class="swiper-slide">IMAGE 3</div>
    <div class="swiper-slide">IMAGE 4</div>
    <div class="swiper-slide">IMAGE 5</div>
  </div>    
</div>
   <div class="swiper-pagination"></div>
</div>

Upvotes: 0

helloworld
helloworld

Reputation: 186

You're using <div class="swiper-pagination"></div> outside the scope of <div class="swiper-container">

Have a look at this code on jsfiddle that I wrote for you:

https://jsfiddle.net/udf82qaw/

Upvotes: 1

Related Questions