jq h5实现swiper轮播图全屏预览

最新推荐文章于 2024-09-21 20:57:10 发布

养猪场老板

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量1.7k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_30021357/article/details/103290110

版权

本文介绍了如何利用CSS和jQuery为Swiper轮播图添加全屏预览功能。在找不到Swiper内置的全屏预览选项后，作者通过动态生成全屏轮播图并复制内容，结合Swiper的slideTo方法，实现了预览指定图片的功能。用户点击轮播图时，进入预览模式，再次点击则退出预览。

摘要由CSDN通过智能技术生成

今天实现swiper轮播图全屏预览，之前写mip化页面的时候轮播图组件有全屏预览的属性

以为swiper.js（https://www.swiper.com.cn/）会有，可是没有找到呀，网上的框架也很多，但是不想改插件了

所以用最简单的方式css+jq 对swiper插件实现了全屏预览（单个轮播或多个轮播可用）

逻辑：1. 通过用户点击轮播图元素，在动态生成一个全屏的轮播图，把点击的轮播图内容复制到全屏的轮播图中，

2. 判断用户点击轮播图的索引，通过swiper给的slideTo（）方法指定全屏轮播图默认显示第几张图片

3. showfull字段判断当前是否是预览模式默认showfull = 0；如果是再次点击清空全屏轮播容器，退出预览模式

var showfull = 0;
$("body").on('click', '.swiper-container', function(e) {
			if(showfull == 0){
				var index = $(this).parents(".wrap").attr("data-index");
				var html = '';
				var i = $(this).find(".swiper-slide-active").index();
				html += '<div class="swiper-

最低0.47元/天解锁文章