4

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

4 Answers 4

13

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>`;
    },
  },
});
1
  • 1
    Set the Swiper's pagination/bulletClass property to your own className, then the bullet will be clickable and have your own styling.
    – Corgalore
    Jul 15, 2021 at 19:30
4

You just need to define the custom class of your pagination element as bulletClass in your options if you don't want to add the swiper-pagination-bullet class to your custom element.

bulletClass: 'my-custom-pagination-item',

Here's the documentation for this feature.

2

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;
    }
  }
});
-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.