Swiper总结

最新推荐文章于 2024-07-22 11:15:00 发布
最新推荐文章于 2024-07-22 11:15:00 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： javascript html 前端 swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14876133/article/details/130504788
版权
Swiper是一个用于移动终端的JavaScript滑动特效插件，支持触屏操作，可实现焦点图、Tab切换、轮播图等多种效果。文章详细介绍了Swiper的配置和使用方法，包括自动切换、分页器样式、切换效果、预览视差、延迟加载、自适应高度和放大缩小等功能，并提供了实例代码展示。
摘要由CSDN通过智能技术生成

文章目录

Swiper总结

概述

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择

Swiper官网

使用

更多样式查看

简单使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .swiper {
        width: 600px;
        height: 300px;
        border: 1px solid red;
        margin: 50px auto;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="swiper" id="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>

      <!-- 前进后退按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

      <!-- 分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper("#mySwiper", {
        // 方向
        direction: "horizontal",
        // 是否循环
        loop: true,
        // 前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 滚动条
        scrollbar: {
          el: ".swiper-scrollbar",
        },
      });
    </script>
  </body>
</html>

自动切换

var mySwiper = new Swiper('.swiper', {
    // 开启自动切换
    autoplay:true
});

var mySwiper = new Swiper('.swiper', {  
    // 等同于上面
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
    },
});

分页器样式

动态子弹

var swiper = new Swiper(".mySwiper", {
    pagination: {
        el: ".swiper-pagination",
        dynamicBullets: true,
    },
});

在这里插入图片描述

进度条

var swiper = new Swiper(".mySwiper", {
    pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
    }
});

在这里插入图片描述

数字

var swiper = new Swiper(".mySwiper", {
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    }
});

在这里插入图片描述

自定义

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .swiper {
        width: 600px;
        height: 300px;
        border: 1px solid red;
        margin: 50px auto;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .swiper-pagination-bullet {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #000;
        opacity: 1;
        background: rgba(0, 0, 0, 0.2);
      }
      .swiper-pagination-bullet-active {
        color: #fff;
        background: #007aff;
      }
    </style>
  </head>
  <body>
    <div class="swiper" id="mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
      </div>

      <!-- 前进后退按钮 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>

      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper("#mySwiper", {
        // 前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

切换效果

淡入

var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    effect: "fade",
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

方块

var swiper = new Swiper(".mySwiper", {
    effect: "cube",
    grabCursor: true,
    cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
    },
    pagination: {
        el: ".swiper-pagination",
    },
});

3D流

var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: "auto",
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    },
    pagination: {
        el: ".swiper-pagination",
    },
});

3D翻转

var swiper = new Swiper(".mySwiper", {
    effect: "flip",
    grabCursor: true,
    pagination: {
        el: ".swiper-pagination",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

卡片式

var swiper = new Swiper(".mySwiper", {
    effect: "cards",
    grabCursor: true,
});

预览

var swiper = new Swiper(".mySwiper", {
    // 同时显示数量
    slidesPerView: 3,
    // 是否居中，true表示居中，false表示居左
    centeredSlides: false,
    // 页面间距
    spaceBetween: 30,
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

视差效果

  • data-swiper-parallax属性控制元素位移，单位为px何百分比。
  • data-swiper-parallax-opacity属性控制元素透明度，必须设置位移。
  • data-swiper-parallax-scale属性控制元素缩放，必须设置位移。
  • data-swiper-parallax-duration属性控制视差动画时长。
<!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 rel="stylesheet" href="../swiper-bundle.min.css" />
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #eee;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper {
				width: 100%;
				height: 100%;
				background: #000;
			}

			.swiper-slide {
				font-size: 18px;
				color: #fff;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding: 40px 60px;
			}

			.parallax-bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 130%;
				height: 100%;
				-webkit-background-size: cover;
				background-size: cover;
				background-position: center;
			}

			.swiper-slide .title {
				font-size: 41px;
				font-weight: 300;
			}

			.swiper-slide .subtitle {
				font-size: 21px;
			}

			.swiper-slide .text {
				font-size: 14px;
				max-width: 400px;
				line-height: 1.3;
			}
		</style>
	</head>

	<body>
		<!-- Swiper -->

		<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
			<div class="parallax-bg" style="
          background-image: url(./images/nature-1.jpg);
        " data-swiper-parallax="-23%"></div>
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="text" data-swiper-parallax="-100">
						<p> 啊啊啊啊啊 </p>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="3000">
						<p> 拜拜拜拜 </p>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="text" data-swiper-parallax="-600" data-swiper-parallax-duration="6000">
						<p> 匆匆匆匆 </p>
					</div>
				</div>
				<div class="swiper-slide">
					<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.1"
						data-swiper-parallax-duration="6000">透明度变化</div>
				</div>
			</div>
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<div class="swiper-pagination"></div>
		</div>

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

		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper(".mySwiper", {
				// 切换速度，默认300
				speed: 600,
				// 开启视差效果
				parallax: true,
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			});
		</script>
	</body>
</html>

延迟加载

  • 图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
  • 背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
<div class="swiper">
    <div class="swiper-wrapper">
        <!-- 延迟加载图片的结构 -->
        <div class="swiper-slide">
            <!-- 延迟加载图片 -->
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <!-- 加载进度条 -->
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>

        <!-- 延迟加载背景图的结构 -->
        <div class="swiper-slide">
             <!-- 延迟加载背景图片 -->
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>
    </div>
</div>

var swiper = new Swiper(".mySwiper", {
    // 开启延迟加载
    lazy: true,
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

自适应高度

自动高度。设置为 true 时，wrapper 和container 会随着当前slide 的高度而发生变化。

var swiper = new Swiper('.swiper', {
    autoHeight: true, //高度随内容变化
});

放大缩小

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="./images/nature-1.jpg" />
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="./images/nature-2.jpg" />
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="./images/nature-3.jpg" />
            </div>
        </div>
    </div>
</div>

var swiper = new Swiper(".mySwiper", {
    // 开启缩放
    zoom: true
});

案例

tab切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab切换</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      a {
        text-decoration: none;
        color: #333;
      }
      .tab-container {
        width: 500px;
        border: 1px solid black;
        margin: 100px auto;
      }
      .tab-header {
        display: flex;
        justify-content: space-around;
        line-height: 50px;
      }
      .tab-label-active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
      .tab-content {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <div class="tab-header">
        <a
          href="javascript:;"
          class="tab-label tab-label-active"
          data-index="0">
          西游记
        </a>
        <a href="javascript:;" class="tab-label" data-index="1">水浒传</a>
        <a href="javascript:;" class="tab-label" data-index="2">三国演义</a>
      </div>
      <div class="swiper tab-content">
        <div class="swiper-wrapper">
          <div class="swiper-slide">西游记内容</div>
          <div class="swiper-slide">水浒传内容</div>
          <div class="swiper-slide">三国演义内容</div>
        </div>
      </div>
    </div>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
      let tabHeader = document.querySelector(".tab-header");
      let tabLabels = document.querySelectorAll(".tab-label");

      const tabSwiper = new Swiper(".swiper", {
        on: {
          slideChangeTransitionEnd: function () {
            for (let item of tabLabels) {
              item.classList.remove("tab-label-active");
            }
            tabLabels[this.activeIndex].classList.add("tab-label-active");
          },
        },
      });
      tabHeader.addEventListener("click", (e) => {
        let el = e.target;
        if (
          el.nodeName.toLowerCase() === "a" &&
          el.classList.contains("tab-label")
        ) {
          tabSwiper.slideTo(el.dataset.index);
        }
      });
    </script>
  </body>
</html>

引导页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>页面滑动切换</title>
		<link rel="stylesheet" href="./swiper-bundle.min.css" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.swiper-container {
				width: 100vw;
				height: 100vh;
			}

			.swiper-slide {
				overflow: hidden;
				position: relative;
				display: flex;
				justify-content: center;
			}

			.logistics-slide {
				background-color: #57cfe1;
			}

			.purchase-slide {
				background-color: #fe8e34;
			}

			.logistics-text,
			.purchase-text {
				position: absolute;
				width: 214px;
				opacity: 0;
				transition: all 1s 0.5s;
			}

			.logistics-text-active,
			.purchase-text-active {
				opacity: 1;
			}

			.logistics-text {
				top: 50px;
			}

			.purchase-text {
				bottom: 40px;
			}

			.logistics-phone,
			.logistics-person,
			.purchase-phone,
			.purchase-person {
				position: absolute;
				width: 180px;
				transition: all 0.5s;
			}

			.logistics-phone {
				bottom: 0;
				transform: translate3d(-1000px, 0, 0);
			}

			.logistics-phone-active {
				transform: translate3d(-70px, 0, 0);
			}

			.logistics-person {
				bottom: 0;
				transform: translate3d(1000px, 0, 0);
			}

			.logistics-person-active {
				transform: translate3d(70px, 0, 0);
			}

			.purchase-person {
				top: 50px;
				transform: translate3d(-70px, -1000px, 0);
			}

			.purchase-person-active {
				top: 50px;
				transform: translate3d(-70px, 0, 0);
			}

			.purchase-phone {
				top: 120px;
				transform: translate3d(70px, 1000px, 0);
			}

			.purchase-phone-active {
				top: 120px;
				transform: translate3d(70px, 0, 0);
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide logistics-slide">
					<img src="./images/logistics-phone.png" alt="" class="logistics-phone" id="logistics-phone" />
					<img src="./images/logistics-person.png" alt="" class="logistics-person" id="logistics-person" />
					<img src="./images/logistics-text.png" alt="" class="logistics-text" id="logistics-text" />
				</div>
				<div class="swiper-slide purchase-slide">
					<img src="./images/purchase-phone.png" alt="" class="purchase-phone" id="purchase-phone" />
					<img src="./images/purchase-person.png" alt="" class="purchase-person" id="purchase-person" />
					<img src="./images/purchase-text.png" alt="" class="purchase-text" id="purchase-text" />
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>

		<script src="./swiper-bundle.min.js"></script>
		<script>
			const classNames = [
				['logistics-phone', 'logistics-person', 'logistics-text'],
				['purchase-phone', 'purchase-person', 'purchase-text']
			];

			new Swiper('.swiper-container', {
				direction: 'horizontal',
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				mousewheel: true,
				on: {
					init() {
						// 在初始化时触发一次 slideChangeTransitionEnd 事件
						this.emit('slideChangeTransitionEnd');
					},
					slideChangeTransitionEnd() {
						for (const id of classNames[this.activeIndex]) {
							const $el = document.getElementById(id);
							$el.classList.add(`${id}-active`);
						}

						if (typeof this.previousIndex !== 'undefined') {
							for (const id of classNames[this.previousIndex]) {
								const $el = document.getElementById(id);
								$el.classList.remove(`${id}-active`);
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
xiangxiongfly915
关注
专栏目录
swiper轮播问题之二：默认显示3张图片，中间显示全部两边显示部分
weixin_30551947的博客
10-16 2493
其二：项目遇到比较有点要求的轮播图，默认显示3张图片，中间显示全部，两边显示部分。如图： 网上找了也没有找到合适的，最后经过自己摸索写了出来，贴出代码分享给大家。 CSS .swiper-container { margin-top: 20px; width: 7...
Vue3使用 swiper 详细总结 填坑分享
曈欣的博客
11-17 1360
使用 swiper 的时候，遇到了一些问题，通过这篇文章总结一下。报错：To install them, you can run: npm install --save swiper/css swiper/vue。左右切换按钮无效，分页Pagination不显示。vue单文件组件中无法修改swiper样式
Swiper 立体旋转 循环旋转大图特效 自写
11-27
Swiper 立体旋转特效 循环旋转特效 可添加回调函数 知道Swiper的同志可以下载 共同学习下
swiper手机焦点图幻灯片切换特效
06-09
swiper手机焦点图幻灯片切换特效是一款基于swiper.js的手机移动端图片滑动切换代码，宽屏响应式自适应浏览器宽度。
前端JS特效第47集：Swiper仿魅族官网大图轮播幻灯片特效
最新发布
2401_85903333的博客
07-22 328
Swiper仿魅族官网大图轮播幻灯片特效
Swiper Animate使用方法、Swiper 动画效果
蔡菜小奥比的博客
01-25 1453
swiper animate使用方法
swiper3实现卡片效果banner
04-13
总结起来，通过使用 Swiper3 并配置其参数，我们可以轻松地创建出具有卡片翻转效果的 banner。这个过程涉及到 HTML 结构设计、CSS 样式调整以及 JavaScript 事件处理，使得用户体验更加丰富和动态。在实际项目中，还...
前端必备swiper简单好用基本详解
07-06
总结，Swiper7 以其易用性、灵活性和强大的功能，成为前端开发者的必备工具。通过熟练掌握其基本概念、功能、配置选项，开发者可以轻松实现各种滑动效果，提升用户体验。同时，结合实际案例，我们可以看到如何利用 ...
swiper常用总结
得意小门生的博客
09-29 713
一、给当前点击的swiper-slide,添加一个class <script> var mySwiper = new Swiper('#swiper1', { slidesPerView: 5, on: { click: function () { // alert(this.clickedIndex); var
swiper示例，横向布局，垂直布局，配色参数，Grid，Menu
01-29
总结，此项目为我们提供了Swiper 8.4.5的实例，涵盖了基本和高级用法，包括横向和垂直布局，自定义配色，Grid布局以及可滑动的菜单。通过研究这些文件，开发者不仅可以学习如何使用Swiper，还能了解到如何将Swiper与...
swiper实现的背景自适应+上拉自动加载(loading效果)的资讯列表页
07-17
swiper实现的背景自适应+上拉自动加载(loading效果)的资讯列表页 微信项目中用到的资讯列表页，为了适应手机端特别优化，采用swiper插件，每一页数据相当于一个swiper-slide，下拉到最底部，ajax取下一页数据，底部加入loading效果，感觉还不错，敬请试用。
HTML+CSS+JS实现Swiper插件网一个动态效果
weixin_51831991的博客
04-10 1157
本案例旋转的图片素材来源于 Swiper中文网/Swiper在移动端的实际应用（演示）
年度报告小知识点总结
浮游的博客
03-12 122
这篇文章是一些零碎的知识点，可能会有点杂，有耐心的可以看下。 一、屏幕滑动事件 1、pc触屏事件和移动端触屏事件 pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。 当按下
Swiper
小白小白从不日别的博客
11-20 6391
一、swiper基本使用 1.1 什么是swiper? Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 这里以 swiper7为例 1.2 如何使用swiper? 引入swiper对应的css和js文件(swiper-bundle.min.js和swiper-bundle.min.css文件，...
Swiper详解
zhong_333的博客
10-21 5881
swiper是一款轻量级的轮播图插件，开源、免费、稳定、使用简单且功能强大，由纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果，是架构移动终端网站的重要选择！
swiper轮播自定义指示器内容和轮播到后多久开始动画
langligelangxy的博客
05-24 270
/ 加一个要显示在指示器内文字的数组。//每个slide切换结束时也运行当前slide动画。//初始化完成开始动画。swiper-animate-delay="1.5s" //延迟几秒。ani // 需要添加动画的元素一定要加这个类名。
swiper图片懒加载（多行多列）
山有木兮木有枝 心悦君兮君不知
03-03 3951
首先看文档：lazyLoading_swiper3参数选项 问题一：多行多列的swiper发现只有第一行会出现懒加载，第二行的swiper一直不加载 解决方案：增加属性watchSlidesVisibility:true, 问题二：要做到懒加载正式图片之前先显示一张默认的背景图 解决方案：正式图片放在data-src中，默认背景图放在src中 <img class="swiper-lazy" data-src="images/goods.jpg" alt=" " src="images
前端笔记——Swiper（持续更新中）~
Mike白的博客
06-30 2975
Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。
Swiper自定义分页器的样式
Be_black的博客
04-06 2021
swiper实现自定义分页器央视
移动端Swiper效果深度解析
总结，Swiper 是一个强大且灵活的移动端轮播组件，其核心在于利用 CSS3 的 `transform` 属性和触摸事件来实现平滑的页面滑动效果。开发者可以通过调整配置和使用插件来满足不同项目的需求。对于想要深入了解移动端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值