标题仿今日头条滑动轮播
1.html+css+jQuery+Swipre 记得引入相关插件哟~~~
2.使用Swiper滑动轮播想要把点击文字居中是没有问题的,你会发现左右有空白处。
3.点击文字达到文字居中效果是需要改变transform: translate3d(0,0,0);
4.或者使用循环轮播来达到填充效果。loop : true,
直接看图,上代码
html
<div class="swiper-container nav-padding-right"> <div class="swiper-container tyre"> <div class="swiper-wrapper"> <!-- 单独模板 --> <a href="#" class="swiper-slide myOrder-nav-hover">洗车</a> <a href="#" class="swiper-slide">检查</a> <a href="#" class="swiper-slide">代驾</a> <a href="#" class="swiper-slide">事故代步</a> <a href="#" class="swiper-slide">救援</a> <a href="#" class="swiper-slide">保养</a> <a href="#" class="swiper-slide">加油</a> <a href="#" class="swiper-slide">福利</a> <a href="#" class="swiper-slide">查询服务</a> </div> </div> <i class="icon-application"></i> </div>
CSS 注意:红色处代码此处为固定位置。
.nav-padding-right{
padding-right: .8rem;
padding-left: .2rem;
position: relative;
}
.tyre .swiper-slide{
line-height: .5rem;
height: .5rem;
width: 1.5rem;
text-align: center;
font-weight: normal;
}
.tyre a.tyre-link {
display: inline-block;
font-size: .26rem;
padding-bottom: .2rem;
width: 100%;
}
.myOrder-nav-hover {
color: #fa7268;
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(-300px,0,0);
}
js
$(function () {
var mySwiper = new Swiper('.swiper-container',{
direction: 'horizontal',//水平滑动
slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide。
//centeredSlides : true,//true居中
slidesPerView: 'auto',//自适应宽度
loopedSlides:11, //使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
});
// 导航
$(".swiper-wrapper a").click(function() {
$(this).siblings('a').removeClass('myOrder-nav-hover');
$(this).addClass('myOrder-nav-hover');
});
});
代码很粗糙,技术很烂,记录点滴,请别见怪希望大神带带~~~