Custom pagination swiper.js

3
votes

I'm using swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA)

Please find attached a fiddle of the working code of my current code: https://jsfiddle.net/0L2h1p25/12/

I'm now trying to get it styled the way I want but there are 2 issues I need to get fixed.

Part 1: Pagination dots are not clickable Part 2: Navigation does not work

Part 1: I've changed the pagination in swiper.js in order to get the style I want, it's now stopped the user from clicking on the dots to get to the slide.

You're supposed to use:

paginationClickable: true,

to allow clicking but it won't work when you use;

paginationType: "custom",

I need help making the following code clickable so when someone clicks on the dot, it goes to the slide.

Here's swiper execution:

// Swiper Execution
var swiper = new Swiper('.hero-container', {
    direction: 'horizontal',
    pagination: '.cd-slider',
    nextButton: '.swiper-next',
    prevButton: '.swiper-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    loop: true,
    speed: 400,
    effect: 'slide',
    keyboardControl: true,
    hashnav: true,
    useCSS3Transforms: false,
    paginationType: "custom",
    paginationCustomRender: function(swiper, current, total) {
        var names = [];
        $(".swiper-wrapper .swiper-slide").each(function(i) {
            names.push($(this).data("name"));
        });
        var text = "<ul>";
        for (let i = 1; i <= total; i++) {
            if (current == i) {
                text += "<li><a class='active'><span class='cd-dot'></span><span class='cd-label'>Item 1</span></a></li>";
            } else {
                text += "<li><a><span class='cd-dot'></span><span class='cd-label'></span></a></li>";
            }

            }
        text += "</ul>";
        return text;
    }
});

If I change the execution to the following then the dots are clickable but i can't get it styled the way I want

// Swiper Execution
var swiper = new Swiper('.hero-container', {
    direction: 'horizontal',
    pagination: '.cd-slider',
    nextButton: '.swiper-next',
    prevButton: '.swiper-prev',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 0,
    loop: true,
    speed: 400,
    effect: 'slide',
    keyboardControl: true,
    hashnav: true,
    useCSS3Transforms: false,
});

Part 2: Finally I would like to create a navigation bar so that when the user clicks on a link, it will go to the slide, i've currently got no code for this but i'm hoping part 1 should help with this.

Thanks

3
javascriptjquerycssswiper

3 Answers

0
votes

Its not possible with swiper's options you can try writing it yourself like I did look at the answer to this question swiper custom pagination only slides once

I wrote a function that creates pagination text and commands slider to slide to the appropriate item.

6
votes

You must use the following code.

new Swiper('.swiper', {
  pagination: {
    el: '.pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return `<span class="dot swiper-pagination-bullet">${index}</span>`;
    },
  },
});
0
votes

You need to add the swiper-pagination-bullet class to the custom pagination item to allow each pagination item to be clickable. And then overwrite the styling that comes with that class.

const swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderCustom: function(swiper, current, total) {
      var names = [];
      $(".swiper-wrapper .swiper-slide").each(function(i) {
          names.push($(this).data("name"));
      });
      var text = "<ul>";
      for (let i = 1; i <= total; i++) {
        if (current == i) {
          text += `<li class="swiper-pagination-bullet active">${names[i]}</li>`;
        } else {
          text += `<li class="swiper-pagination-bullet">${names[i]}</li>`;
        }
      }
      text += "</ul>";
      return text;
    }
  }
});