Swiper中文论坛

标题: slideToClickedSlide 在IOS中 点击串位置，怎么回事？ [打印本页]

---

作者: 夜半初寒灯阑珊    时间: 2017-9-13 17:19
标题: slideToClickedSlide 在IOS中 点击串位置，怎么回事？
RT
slideToClickedSlide 在IOS中 点击串位置，怎么回事？  页面效果类似 京东APP 首页中的—— 发现好店——页面的滑动导航
JS代码
function swiperNav(){
        var mySwiper2 = new Swiper('.banner_box',{
                slideToClickedSlide:true,
                roundLengths : true,
                slidesPerView : 'auto',
                freeMode : true,
        })
}

HTML 代码

<div class="banner_box">
                        <div class="banner swiper-wrapper" id="top_nav_slide">
                                <span class="swiper-slide red_bacol" id="trigger1">家用电器</span>
                                <span class="swiper-slide " id="trigger2">家具厨具</span>
                                <span class="swiper-slide"  id="trigger3">个护美妆</span>
                                <span class="swiper-slide"  id="trigger4">潮流女装</span>
                                <span class="swiper-slide"  id="trigger5">运动户外</span>
                                <span class="swiper-slide"  id="trigger6">医药保健</span>
                                <span class="swiper-slide"  id="trigger7">图书</span>
                                <span class="swiper-slide"  id="trigger8">食品生鲜</span>
                                <span class="swiper-slide"  id="trigger9">鞋靴箱包</span>
                                <span class="swiper-slide"  id="trigger10">手机数码</span>
                                <span class="swiper-slide"  id="trigger11">母婴童装</span>       
                                <span class="swiper-slide"  id="trigger12">电脑办公</span>
                                <span class="swiper-slide"  id="trigger13">品牌男装</span>
                                <span class="swiper-slide"  id="trigger14">酒水饮料</span>
                                <span class="swiper-slide"  id="trigger15">内衣配饰</span>
                                <span class="swiper-slide"  id="trigger16">家居家装</span>
                                <span class="swiper-slide"  id="trigger17">玩具乐器</span>
                                <span class="swiper-slide"  id="trigger18">汽车用品</span>
                                <span class="swiper-slide"  id="trigger19">奢品礼品</span>
                                <span class="swiper-slide"  id="trigger20">钟表珠宝</span>
                                <span class="swiper-slide"  id="trigger21">全球购</span>
                                <span class="swiper-slide"  id="trigger22">生活旅行</span>
                                <span class="swiper-slide"  id="trigger23">特产馆</span>
                                <span class="swiper-slide"  id="trigger24">音乐</span>
                                <span class="swiper-slide"  id="trigger25">教育</span>
                                <span class="empty_box swiper-slide"></span>
                        </div>
                </div>

CSS代码
.banner_box{
        width: 100%;
        height: 2.8rem;
        background: #0C0C0C;
        overflow: hidden;
        position: fixed;
        top: 2.5rem;
        z-index: 20;
}
.banner{
        width:auto;
        height: 2.8rem;       
        color: white;
        line-height: 2.8rem;
        position: relative;
}
.banner>span{
        display: inline-block;
        height: 2.8rem;
        padding: 0 0.7rem;
}
.swiper-slide{
        width: auto !important;
}

.empty_box{
        display: inline-block;
        width: 40px !important;
}

---

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)

Powered by Discuz! X3.2