Swiper（三）：自定义点击事件swiper跳到指定页面

最新推荐文章于 2024-07-10 17:53:31 发布

caicaicai404

最新推荐文章于 2024-07-10 17:53:31 发布

阅读量4.2w

点赞数 8

分类专栏： js swiper 文章标签： swiper js

本文链接：https://blog.csdn.net/caimingxian401/article/details/79931907

版权

js 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

swiper

3 篇文章 0 订阅

订阅专栏

选择哪个按钮就会跳到指定的页面，这样我们就可以自己来定义swiper分页器的功能了。

下面的例子可以应用在点击地图上的用户头像，则滚动到到对应用户的信息轮播图

swiper的slideTo方法，swiper.slideTo(index,speed,runCallbacks);

index：必填，需要跳到页面的索引
speed：选填，切换速度（毫秒）
runCallbacks：选填，boolean，为false时不触发onSlideChange回调函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
    	body{padding:20px 10%;}
		.mid{width:100%;height:120px;background: #fff;border-radius: 5px;float:left;text-align: center;line-height: 120px;}
		.swiper_box .swiper-pagination{height:0px;}
		.swiper_box .swiper-pagination-bullet{opacity:1;background: transparent;}
		.swiper_box .swiper-pagination-bullet-active{background: transparent;}
		.swiper_box .swiper-pagination-bullet-active .spanSame{border:3px solid #fff;}
		.swiper_box .spanSame{width:30px;height:30px;display:inline-block;border-radius: 50%;color:#666;text-align: center;line-height: 30px;}
		.swiper_box .span1{background: #7ebfde;margin-top:30px;}
		.swiper_box .span2{background: #aac2f7;float:right;margin-top:60px;}
		.swiper_box .span3{background: #f8b9e7;margin-top:90px;margin-left:45%;}
		.swiper_box .span4{background: #9cdcda;margin-top:150px;float:left;}
		.swiper_box .span5{background: #ece198;margin-top:140px;float:right;}
    </style>
</head>
<body style="background: #d6d6d6;">
    <!-- Swiper -->
    <div class="swiper_box">
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide"><div class="mid">Slide 1</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 2</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 3</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 4</div></div>
	            <div class="swiper-slide"><div class="mid">Slide 5</div></div>
	        </div>
	        <!-- Add Pagination -->
	        
	    </div>
	    <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
	    var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        slidesPerView: 'auto',
	        centeredSlides: true,
	        paginationClickable: true,
            paginationBulletRender: function (swiper, index, className) {
			    return '<span class="spanSame span' + (index + 1) + '">' + (index + 1) + '</span>';
			},
	    });
    	
    	$(".swiper-pagination").on("click","span",function(){
    		var index = $(this).index();
    		swiper.slideTo(index);
    	})

    </script>
</body>
</html>

caicaicai404

关注

8
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
5
评论
Swiper（三）：自定义点击事件swiper跳到指定页面

选择哪个按钮就会跳到指定的页面，这样我们就可以自己来定义swiper分页器的功能了。下面的例子可以应用在点击地图上的用户头像，则滚动到到对应用户的信息轮播图swiper的slideTo方法，swiper.slideTo(index,speed,runCallbacks);index：必填，需要跳到页面的索引speed：选填，切换速度（毫秒）runCallbacks：选填，...
复制链接

扫一扫