查看: 4628|回复: 6
打印 上一主题 下一主题

求助:swiper2分页器如何实现123这样的

[复制链接]
  • TA的每日心情
    难过
    2016-11-10 15:26
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    6

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    跳转到指定楼层
    楼主
    发表于 2016-11-9 18:33:55 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    我开始用的swiper3,但是3不支持IE8,换成了2,倒是支持了,但是分页没办法实现123了下面是实现3的代码

    1. <script>
    2. var swiper = new Swiper('.swiper-container', {
    3.   pagination: '.swiper-pagination',
    4.   paginationClickable: true,
    5.   paginationBulletRender: function (swiper, index, className) {
    6.       return '<span class="' + className + '">' + (index + 1) + '</span>';
    7.   }
    8. });  
    9. </script>
    复制代码
    请问各路大侠,如何用2实现3这样的功能?(如下图的123)


    我的思路是用jquery进行递增,但是目前我的技术实现不了,只能用jquery插入字符,实现不了递增

    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 分享分享 分享淘帖
    回复

    使用道具 举报

  • TA的每日心情
    难过
    2016-11-10 15:26
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    6

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    沙发
     楼主| 发表于 2016-11-10 15:25:28 | 只看该作者
    求大神相助
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    难过
    2016-11-10 15:26
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    6

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    板凳
     楼主| 发表于 2016-11-10 16:00:18 | 只看该作者
    问题解决了
    贴上代码,需要的同学可以看看
    1.   var mySwiper = new Swiper('#swiper-container3',{
    2.     pagination: '#pagination3',
    3.     paginationClickable: true,
    4.         loop : true,
    5.     spaceBetween: 0,
    6.     centeredSlides: true,
    7.     autoplay: 2700,
    8.         eventTarget : 'container',
    9.     autoplayDisableOnInteraction: false,
    10.         $('#btn1').click(function(){
    11.         mySwiper.swipeTo(0, 1000, false);
    12.         })
    13.         $('#btn2').click(function(){
    14.         mySwiper.swipeTo(1, 1000, false);
    15.         })
    16.         $('#btn3').click(function(){
    17.         mySwiper.swipeTo(2, 1000, false);
    18.         })
    19.         $('#btn4').click(function(){
    20.         mySwiper.swipeTo(3, 1000, false);
    21.         })

    22.   })
    复制代码
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    难过
    2016-11-10 15:26
  • 签到天数: 2 天

    [LV.1]初来乍到

    1

    主题

    6

    帖子

    25

    积分

    新手上路

    Rank: 1

    积分
    25
    地板
     楼主| 发表于 2016-11-10 16:00:35 | 只看该作者
    swipeTo(index,speed,runCallbacks)
    滑动到到指定滑块。
    index:必选,num,指定将要切换到的slide的索引,第一个为0
    speed:可选,num(单位ms),切换速度
    runCallbacks:可选,boolean,设置为false时不会触发onSlideChange回调函数。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-1-3 15:24
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    6

    帖子

    8

    积分

    新手上路

    Rank: 1

    积分
    8
    5#
    发表于 2017-1-3 15:19:34 | 只看该作者
                            
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-2-14 14:19
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    13

    帖子

    30

    积分

    新手上路

    Rank: 1

    积分
    30
    6#
    发表于 2017-2-13 14:09:53 | 只看该作者
    回复

    使用道具 举报

  • TA的每日心情
    难过
    2017-3-6 10:51
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    21

    积分

    新手上路

    Rank: 1

    积分
    21
    7#
    发表于 2017-3-6 10:56:09 | 只看该作者
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-5-3 06:23 , Processed in 0.066191 second(s), 29 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表