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

我发现，如果你试图为每张幻灯片使用单独的图标，我会在html数据属性中提供图标的附加功能，因此我决定像这样解决它：

.factory('StorageService', function($localStorage) {
    $localStorage = $localStorage.$default({
        things: {}
    });

    var _getAll = function() {
        return $localStorage.things;
    };
    var _addByKey = function(thing, value) {
        $localStorage.things[thing] = value;
    }

    return {
        getAll: _getAll,
        addByKey: _addByKey
    };
})

Swiper分页自定义类

2 个答案: