Swiper移动端触屏轮动及动画Swiper Animate的使用

最新推荐文章于 2024-07-18 18:27:58 发布

hangGe0111

最新推荐文章于 2024-07-18 18:27:58 发布

阅读量2k

点赞数

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

本文链接：https://blog.csdn.net/hangGe0111/article/details/81332100

版权

本文介绍了如何在移动端使用Swiper进行触屏轮动，并详细讲解了Swiper Animate的集成与使用，包括所需资源的加载、动画效果的查看和自定义。确保在初始化Swiper时其父元素显示，根据Swiper版本选择合适的API，并通过onSlideChangeEnd回调获取当前索引。同时，Swiper Animate提供了丰富的动画效果，开发者可以在官网查阅更多动画选项并按需定制。

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

swiper用法（此处以3.xxx为例）

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入swiper.css插件css样式-->
		<link href="https://cdn.bootcss.com/Swiper/3.2.5/css/swiper.css" rel="stylesheet">
		<style type="text/css">
			.swiper-container {
			    width: 600px;
			    height: 300px;
			}  
		</style>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" style="background-color: rgba(200,50,70,0.2);">Slide 1</div>
		        <div class="swiper-slide" style="background-color: orange;">Slide 2</div>
		        <div class="swiper-slide" style="background-color: rgba(0,0,0,0.2);">Slide 3</div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		    
		    <!-- 如果需要滚动条 -->
		    <div class="swiper-scrollbar"></div>
		</div>
		<!--引入swiper.js