swiper.js手机触屏滑动全屏幻灯片左右切换代码 : GezCode源码站-专业源码源代码,抓包资源整站,互站源码,php源码,java源码,vue源码,游戏源码,直播源码,直播带货,合约源码,合约源码下载,娱乐彩,求购需求,源码出售,源码买卖,源码平台,整站源码下载!GezCode Source Station-Professional source code, package grabbing resources for the entire site, mutual source code, PHP source code, Java source code, Vue source code, game source code, live source code, live streaming with goods, contract source code, contract source code download, entertainment lottery, purchase demand, source code sales, source code trading, source code platform, whole site source code download! - GezCode源码站-专业源码源代码,抓包资源整站,互站源码,php源码,java源码,vue源码,游戏源码,直播源码,直播带货,合约源码,合约源码下载,娱乐彩,求购需求,源码出售,源码买卖,源码平台,整站源码下载!GezCode Source Station-Professional source code, package grabbing resources for the entire site, mutual source code, PHP source code, Java source code, Vue source code, game source code, live source code, live streaming with goods, contract source code, contract source code download, entertainment lottery, purchase demand, source code sales, source code trading, source code platform, whole site source code download!

swiper.js手机触屏滑动全屏幻灯片左右切换代码

swiper.js手机触屏滑动全屏幻灯片左右切换代码

基于swiper.js手机触屏滑动全屏幻灯片左右切换代码,带缩略图和左右控制箭头的手机移动端图片轮播插件。

js代码

<script src="https://img.x22t.com/file/2020/04/25/04da743bc3e9a5ff82df0171c019474c2401.js"></script> 
<script>
  	//图片等比例
	galleryTopHeight()
	$(window).resize(function(){
		galleryTopHeight()
	})
	
    var galleryTop = new Swiper(".gallery-top-box .gallery-top", {
	  centeredSlides: true,
	  autoplay:{
		delay:4000,
		disableOnInteraction: false 
	  },
	  slidesPerView: "auto",
      spaceBetween: 10,
      navigation: {
        nextEl: ".gallery-top-box .swiper-button-next",
        prevEl: ".gallery-top-box .swiper-button-prev",
      },
	  scrollbar: {
        el: ".swiper-scrollbar",
        hide: false,
		draggable: true,
		dragSize:150,
      }
    });
	
	$(".slideshow").click(function(){
		if($(this).hasClass("pauseed")){
			//播放
			$(this).removeClass("pauseed")
			galleryTop.autoplay.start()
		}else{
			//暂停
			$(this).addClass("pauseed")
			galleryTop.autoplay.stop()
			
		}
	})
	
	galleryTop.scrollbar.$el.css({
		"bottom":"0px",
		"background":"none",
		"height":"5px"
	});
	galleryTop.scrollbar.$dragEl.css({
		"background":"rgba(171,171,171,171.6)"
	}); 
	galleryTop.scrollbar.updateSize();
	
    var galleryThumbs = new Swiper(".gallery-thumbs-box .gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: "auto",
      touchRatio: 0.2,
	  navigation: {
        nextEl: ".gallery-thumbs-box .swiper-button-next",
        prevEl: ".gallery-thumbs-box .swiper-button-prev",
      }
    });
	
	galleryTop.controller.control = galleryThumbs;
	
	<!--注意添加objThumbs,objTop对应的索引值1 ~ N -->
	var objThumbs = $(".gallery-thumbs .swiper-wrapper .swiper-slide");
	var objTop = $(".gallery-top .swiper-wrapper .swiper-slide");
	objThumbs.click(function(e){
		var currentId = $(this).attr("data-id");
		for(var i = 0 ; i< objTop.length; i++){
			if($(objTop[i]).attr("data-id") === currentId){
				$(objTop[i-1]).addClass("swiper-slide-prev")
				$(objTop[i-1]).siblings().removeClass("swiper-slide-prev")
				$(objTop[i]).addClass("swiper-slide-active")
				$(objTop[i]).siblings().removeClass("swiper-slide-active")
				$(objTop[i+1]).addClass("swiper-slide-next")
				$(objTop[i+1]).siblings().removeClass("swiper-slide-next")
				e.preventDefault();
				galleryTop.slideTo(i,1000, false);
			}
		}
	})
	
	function galleryTopHeight(){
		//处理图片比例
		var wh = $(window).height();
		var headernav_height = $(".headernav").height()
		var footernav_height = $(".footernav").height()
		var galleryThumbs_height = $(".gallery-thumbs").height()
		var galleryTop_height = wh - galleryThumbs_height - headernav_height - footernav_height - 22
		$(".gallery-top").css("height",galleryTop_height)
		//缩略图
		var galleryThumbs_width = $(window).width() - 60
		$(".gallery-thumbs-box .swiper-container").css("width",galleryThumbs_width)
		//大图
		var galleryTop_width = $(window).width() - 80
		$(".gallery-top-box .swiper-container").css("width",galleryTop_width)
	}

</script>

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开/商品支付,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

可以

常见问题

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

我们将24小时内回复。
取消
swiper.js手机触屏滑动全屏幻灯片左右切换代码-海报

分享本文封面