Swiper分页自定义类

Question

我有一个工作Swiper安装与分页，但是我想给每个分页按钮一个自定义类。这样做很微不足道，但我想知道Swiper是否提供了这种功能？理想情况下，Swiper幻灯片中的每个幻灯片都会有一个类名，并且随着分页的生成，它可以提取每张幻灯片的类名。如果你看下面的JADE，理想情况下，我可以从每张幻灯片中拉出课程的'服务'，'牛津'，'参与'，'练习'和'分享'，并将其应用到相应的分页元素。 HTML是灵活的，所以如果这是可能的，并且类需要在其他地方，我可以做到这一点。 这里是我的代码如下所示：

JADE

div(class="swiper-wrapper") 

    div(class="swiper-slide serve") 
     a(href="/serve" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Serve 

    div(class="swiper-slide tithe") 
     a(href="/give" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Tithe 

    div(class="swiper-slide engage") 
     a(href="/smalllgroups" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Engage 

    div(class="swiper-slide practice") 
     a(href="/worshipfully" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Practice 

    div(class="swiper-slide share") 
     a(href="/invite" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Share 

    div(class="swiper-button-next swiper-button-black") 
     div(class="swiper-button-prev swiper-button-black") 

div(class="col-sm-12") 
    div(class="swiper-pagination center-block") 

的Javascript

var galleryTop = new Swiper('.gallery-top', { 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     spaceBetween: 10, 
     speed: 600, 
     effect: 'coverflow', 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     paginationBulletRender: function (index, className) { 
      return '<span class="' + className + '">' + (index + 1) + '</span>'; 
     } 
    }); 

Answer 1

因此，它似乎并不认为有一个内置的方式做到这一点，但我的解决方案是给每个幻灯片一个data-class属性与我想要应用于各自的分页元素的类。然后，我修改paginationBulletRender函数来拉取该属性并将其应用于分页元素的类。

JADE

div(class="swiper-slide" data-class="serve") 
     a(href="/serve" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Serve 
       h2(class="text-center cf-subheading") Sign up for ministry 

    div(class="swiper-slide" data-class="tithe") 
     a(href="/give" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Tithe 
       h2(class="text-center cf-subheading") Give 

    div(class="swiper-slide" data-class="engage") 
     a(href="/smalllgroups" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Engage 
       h2(class="text-center cf-subheading") Sign up for a smallgroup 

    div(class="swiper-slide" data-class="practice") 
     a(href="/worshipfully" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Practice 
       h2(class="text-center cf-subheading") Receive our daily devotional 

    div(class="swiper-slide" data-class="share") 
     a(href="/invite" class="coverflow-link") 
      div(class="col-sm-12") 
       h1(class="text-center cf-heading") Share 
       h2(class="text-center cf-subheading") Invite a friend 

的Javascript

paginationBulletRender: function (index, className) { 
    var slide = $('.' + this.wrapperClass).find('.swiper-slide')[index]; 
    return '<span class="' + className + ' ' + $(slide).attr('data-class') + '">' + (index + 1) + '</span>'; 
} 

Answer 2

我发现，如果您尝试使用单独的图标每张幻灯片，图标的sorder转移到幻灯片哪些我提供了一个html数据属性，所以我决定像这样解决它：

var mySwiper = new Swiper ('.swiper-container', { 
      loop: true, 
      speed: 800, 

      pagination: '.swiper-pagination-top', 
      paginationClickable: true, 
      paginationBulletRender: function (index, className) { 
       var count = jQuery('.' + this.wrapperClass).find('.swiper-slide').length; 
// I am avoiding this double alocation in product version, its here to see how little to change the script from Michael 
       var slide = jQuery('.' + this.wrapperClass).find('.swiper-slide')[(index+1)%count];//here is the "magic" 

       return '<img class="'+className+' swiper-bullet" src="'+ jQuery(slide).data('icon') + '" />'; 
      }, 
      nextButton: '#next-slide' 
      });