Swiper实现渐显渐隐产品轮播图

效果图

通过渐显渐隐的方式自动轮播产品图，点击底部的分页器也可以切换图片

1.swiper插件下载地址 https://3.swiper.com.cn/download/index.html

2.加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

3.HTML内容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 轮播产品图 -->
        <p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-front-view.png" alt="产品正视图" /></p>

        <p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-side-view.png" alt="产品侧视图" /></p>

        <p class="swiper-slide product-img"><img src="/wp-content/uploads/2021/07/5gcpe-dorsal-view.png" alt="产品后视图" /></p>

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

4.CSS内容

.swiper-container{
    width: 448px;
    align-self: flex-end;
}
.swiper-pagination-bullet {
    width: 52px;
    height: 6px;
    display: inline-block;
    border-radius: 3px;
    background: #bbb;
}
.swiper-pagination-bullet-active {
    background: #888;
}

5.JS内容

<script>
	$(document).ready(function(){
		var swiper = new Swiper('.swiper-container', {
			effect : 'fade',
			fade: {
				crossFade: true,
			},
			autoplay:2000,
			paginationClickable :true,
			pagination: '.swiper-pagination',
			autoplayDisableOnInteraction : false
		});
	})
</script>

6.Swiper插件API文档 https://3.swiper.com.cn/api/index.html

可以根据自身需要添加各种选项和参数来丰富Swiper～

Swiper实现渐显渐隐产品轮播图

效果图

猜你喜欢