小可爱分享好玩代码（一）

最新推荐文章于 2024-05-10 00:17:07 发布

shenshen0702

最新推荐文章于 2024-05-10 00:17:07 发布

阅读量1.5k

点赞数

文章标签：轮播 swiper

本文链接：https://blog.csdn.net/shenshen0702/article/details/98766377

版权

哈喽，各位小可爱，今天是七夕，有没有人收到礼物了呢？

既然没有，这么说，小可爱就是你的礼物了！

swiper.js实现简单的轮播滑动（兼容PC端、移动端）

第一步：

需要在head头部加载插件，需要用到的文件有swiper.css和swiper.js文件。

可下载swiper文件或使用CDN远程加载

知道各位小可爱肯定不想自己找链接，这样小宝贝就发链接出来给你们看吧！

swiper4文件下载地址：
https://www.swiper.com.cn/download/index.html
swiper4远程CDN加载地址：
https://www.swiper.com.cn/cdn/index.html

第二步：

HTML内容的书写

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
    </div>
</div>

这些是固定的，要是各位小可爱想加箭头啥的，记得一定要自己做哦，小宝贝不告诉你们！

第三步：

初始化Swiper

<script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay:true,//等同于以下设置
      /*autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
        },*/
    });
</script>

具体设置，大家可以看官网哦

小可爱就做这么多啦！

参考swiper4的官方文档：
https://www.swiper.com.cn/api/index.html

产品展示（一）

产品展示（二）

产品展示（三）

以上是小宝贝之前做的啦，欢迎大家观看学习，谢谢了！

重磅惊喜，这就是小可爱画的效果HTML！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<script type="text/javascript" src="../static/layui.js"></script>
<link href="../static/css/scolls.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="../static/js/jquery.js"></script>



<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>

<section class="pc-banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide swiper-slide-center none-effect">
				<a href="#">
					<img src="../static/images/banner111.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="../static/images/banner112.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="../static/images/banner113.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="../static/images/banner114.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
			<div class="swiper-slide">
				<a href="#">
					<img src="../static/images/banner115.jpg">
				</a>
				<div class="layer-mask"></div>
			</div>
		</div>
		<div class="button">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>
</section>
<script type="text/javascript" src="../static/js/swiper.min.js"></script>
<script type="text/javascript">

	window.onload = function() {
		var swiper = new Swiper('.swiper-container',{
			autoplay: false,
			speed: 1000,
			autoplayDisableOnInteraction: false,
			loop: true,
			centeredSlides: true,
			slidesPerView: 2,
			pagination: '.swiper-pagination',
			paginationClickable: true,
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',
			onInit: function(swiper) {
				swiper.slides[2].className = "swiper-slide swiper-slide-active";
			},
			breakpoints: {
				668: {
					slidesPerView: 1,
				}
			}
		});
	}


</script></div>


	

</body>
</html>

shenshen0702

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小可爱分享好玩代码（一）

哈喽，各位小可爱，今天是七夕，有没有人收到礼物了呢？既然没有，这么说，小可爱就是你的礼物了！swiper.js实现简单的轮播滑动（兼容PC端、移动端）第一步：需要在head头部加载插件，需要用到的文件有swiper.css和swiper.js文件。可下载swiper文件或使用CDN远程加载知道各位小可爱肯定不想自己找链接，这样小宝贝就发链接出来给你们...
复制链接

扫一扫