swiper移动端滑动切换选项卡效果



436 1741 581



特效描述:swiper移动端 tab滑动切换选项卡,swiper移动端滑动切换选项卡效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="/cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="css/swiper-3.2.7.min.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="/cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>

3. HTML代码

<div class="container">
	<div class="swiper-container swiper1">
		<div class="swiper-wrapper">
			<div class="swiper-slide selected">推荐</div>
			<div class="swiper-slide">菜单 2</div>
			<div class="swiper-slide">菜单 3</div>
			<div class="swiper-slide">菜单 4</div>
			<div class="swiper-slide">菜单 5</div>
			<div class="swiper-slide">菜单 6</div>
			<div class="swiper-slide">菜单 7</div>
			<div class="swiper-slide">菜单 8</div>
			<div class="swiper-slide">菜单 9</div>
			<div class="swiper-slide">菜单 10</div>
		</div>
	</div>
	<!-- swiper2 -->
	<div class="swiper-container swiper2">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-no-swiping">
				<div style="width: 100%;height: 100%;background-color: gainsboro;">上面导航栏可以滑动</div>
			</div>
			<div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动</div>
			<div class="swiper-slide swiper-no-swiping">内容 11111111</div>
			<div class="swiper-slide swiper-no-swiping">内容 22222222</div>
			<div class="swiper-slide swiper-no-swiping">内容 333333333</div>
			<div class="swiper-slide swiper-no-swiping">内容 44444444</div>
			<div class="swiper-slide swiper-no-swiping">内容 555555555</div>
			<div class="swiper-slide swiper-no-swiping">内容 6666666666</div>
			<div class="swiper-slide swiper-no-swiping">内容 77777777777</div>
			<div class="swiper-slide swiper-no-swiping">内容 m,8888888888</div>
		</div>
	</div>
</div>
<script>
	$(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);
			}
		});
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动选项卡 滑动切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到