关于页面中经常使用的效果,tab+swiper的切换很罕见,多见于两种情况,一种是li切换swiper的slide,一种是li切换swiper。当tabs的li切换swiper的slide,效果以下图所示:
Html:
JS:
var swiper = new Swiper('.swiper-box', {
pagination: '.swiper-pagination',
paginationClickable: true,
grabCursor: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
noSwiping : true,
noSwipingClass : 'stop-swiping',
autoHeight: true,
observer: true,
observeParents: true,
onSlideChangeStart: function(swiper){
var i = swiper.activeIndex;
$(".tabs ul li").eq(i).addClass("active").siblings().removeClass("active");
},
});
$('.tabs ul li').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings('li').removeClass('active');
swiper.slideTo($(this).index(), 500, false);
swiper.update();
});
先引入jquery插件和swiper.min.js和swiper.min.css文件,界说swiper的巨细,初始化Swiper, tabs的li设置一个默许的选中效果active,对应swiper的一个swiper-slide,点击tabs的li时,以后点击的li增加默许的选中效果类名为active,其他的同级li移除active, 在得到以后点击的li标签的下标$(this).index(),履行过渡到索引下标数字即是传入参数index的页面(slide)处,速度为500。并且能够将runCallbacks设置为false,本来是默以为true,那末transition(过渡)不会发生onSlideChange回调函数。那末,就能够做到点击tabs的li能切换对应的swiper-slide,滑动swiper-slide也能切换li的默许选中效果类名active。
当tabs的li切换swiper时,以下图所示:
Html:
Js:
关于两个swiper轮播切换,一个显现,一个潜藏的,
营销型网站优化公司,需求寄望的是假定用display: none;和display:block; swiper的自动切换,点击li切换swiper以后,自动轮播会出错,那末能够用以下的css庖代display: none;和display:block; 如许做的话,tab swiper切换后自动轮播也不会出错了。
Css: