javascript - Özel sayfalama swiper.js

Swiper.js (http://idangero.us/swiper/api/#.WCBYcxKLTfA) kullanıyorum

Lütfen ekte mevcut kodumun çalışır hâldeki kodunun bir fiddle’ını bulabilirsiniz: https://jsfiddle.net/0L2h1p25/12/

Şimdi onu istediğim şekilde biçimlendirmeye çalışıyorum ama çözmem gereken 2 sorun var.

Bölüm 1: Sayfalama noktaları tıklanabilir değil Bölüm 2: Navigasyon çalışmıyor

Bölüm 1: İstediğim stili elde etmek için swiper.js'teki sayfalamayı değiştirdim, artık kullanıcıların noktaları tıklayarak slayta gitmesini engelledi.

Şunu kullanmanız gerekiyor:

paginationClickable: true,

tıklamaya izin vermek ama kullanırken çalışmayacak;

paginationType: "custom",

Birinin noktaya tıkladığında slayta gitmesi için aşağıdaki kodu tıklanabilir hale getirmemde yardıma ihtiyacım var.

İşte swiper çalıştırması:

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

Eğer yürütmeyi aşağıdaki şekilde değiştirirsem, noktalar tıklanabilir oluyor ama istediğim şekilde stil veremiyorum

// 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,
});

Bölüm 2: Son olarak, kullanıcı bir bağlantıya tıkladığında slayta gitmesini sağlayacak bir gezinme çubuğu oluşturmak istiyorum, bunu yapmak için şu anda hiç kodum yok ama umarım Bölüm 1 bununla yardımcı olur.

Teşekkürler

Cevap #1

Aşağıdaki kodu kullanmalısınız.

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

Cevap #2

Özel öğenize swiper-pagination-bullet class eklemek istemiyorsanız, seçeneklerinizde sayfalama öğenizin özel sınıfını bulletClass olarak tanımlamanız yeterlidir.

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

İşte bu özellik için belgeler.