swiper插件实现旋转木马轮播指定显示哪一个

2024-01-28   阅读:185   分类:前端    标签: 轮播插件

在使用swiper插件的时候,有时我们需要设置默认显示哪一张。实现轮播指定显示第几张,可以加入如下设置

一、使用方法

initialSlide参数:设定初始化时slide的索引。Swiper默认初始化时显示第一个slide,如果想在初始化时直接显示其他slide,可以做此设置。设定初始化时slide的索引。Swiper默认初始化时显示第一个slide,如果想在初始化时直接显示其他slide,可以做此设置。

slideTo参数:在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex,比如你的swiper是loop模式且只复制一个slide(默认情况),你想跳转到第三个slide时(activeIndex:3/realIndex:2),使用slideTo(3)。

二、代码编写:

<script>
$(function(){
	var certifySwiper = new Swiper('#doctor-container', {
	 watchSlidesProgress: true,
	 slidesPerView: 'auto',
	 centeredSlides: true,
	 loop: true,
	 loopedSlides: 100,
	 autoplay: false,
	 navigation: {
	  nextEl: '#case-button-next',
	  prevEl: '#case-button-prev',
	 },
	 pagination: {
	  el: '#case-pagination',
	  //clickable :true,
	 },
	 initialSlide: 4,
	 on: {
	  progress: function(progress) {
	   for (i = 0; i < this.slides.length; i++) {
	    var slide = this.slides.eq(i);
	    var slideProgress = this.slides[i].progress;
	    modify = 1;
	    if (Math.abs(slideProgress) > 1) {
	     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
	    }
	    translate = slideProgress * modify * 260 + 'px';
	    scale = 1 - Math.abs(slideProgress) / 5;
	    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
	    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
	    slide.css('zIndex', zIndex);
	    slide.css('opacity', 1);
	    if (Math.abs(slideProgress) > 1) {
	     slide.css('opacity', 0);
	    }
	   }
	  },
	  setTransition: function(transition) {
	   for (var i = 0; i < this.slides.length; i++) {
	    var slide = this.slides.eq(i)
	    slide.transition(transition);
	   }

	  }
	 }

	})
	certifySwiper.slideTo(initialSlide,0,false)
})
</script>

三、效果展示:

【腾讯云】年度爆款2核2G4M云服务器118元/年,新老用户同享

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/1035.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×