body {
min-width: 320px;
max-width: 640px;
margin: 0 auto;
color: #333;
padding: 0;
font-family: "Microsoft Yahei";
text-align: center;
}
.container {
/*width: 100%;*/
border: 1px solid #ccc;
}
.swiper1 {
width: 100%;
}
.swiper1 .selected {
color: #ec5566;
border-bottom: 2px solid #ec5566;
}
.swiper1 .swiper-slide {
text-align: center;
font-size: 16px;
height: 50px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
}
.swiper2 {
width: 100%;
}
.swiper2 .swiper-slide {
height: calc(100vh - 50px);
background-color: #ccc;
color: #fff;
text-align: center;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
$(function() {
function setCurrentSlide(ele, index) {
$(".swiper1 .swiper-slide").removeClass("selected");
ele.addClass("selected");
//swiper1.initialSlide=index;
}
var swiper1 = new Swiper('.swiper1', {
// 设置slider容器能够同时显示的slides数量(carousel模式)。
// 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
// loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
slidesPerView: 5.5,
paginationClickable: true,//此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。
spaceBetween: 10,//slide之间的距离(单位px)。
freeMode: true,//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。
loop: false,//是否可循环
onTab: function(swiper) {
var n = swiper1.clickedIndex;
}
});
swiper1.slides.each(function(index, val) {
var ele = $(this);
ele.on("click", function() {
setCurrentSlide(ele, index);
swiper2.slideTo(index, 500, false);
//mySwiper.initialSlide=index;
});
});
var swiper2 = new Swiper('.swiper2', {
//freeModeSticky 设置为true 滑动会自动贴合
direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。
loop: false,
// effect : 'fade',//淡入
//effect : 'cube',//方块
//effect : 'coverflow',//3D流
// effect : 'flip',//3D翻转
autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
onSlideChangeEnd: function(swiper) { //回调函数,swiper从一个slide过渡到另一个slide结束时执行。
var n = swiper.activeIndex;
setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
swiper1.slideTo(n, 500, false);
}
});
});