学习前端前期想做出轮播图效果之swiper插件的介绍

Tea-pd

已于 2022-07-23 16:43:22 修改

阅读量969

点赞数 14

分类专栏： html 文章标签：前端学习 javascript html css3

于 2022-07-23 16:38:12 首次发布

本文链接：https://blog.csdn.net/tea_tea_/article/details/125948784

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先，大家都知道轮播图的效果需要用到原生js自己写，但在学习前期我们想要做出轮播图的效果又怎么办呢，这里我们就要用到swiper这一个插件，接下来我们进行介绍。

第一步：老规矩，上框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

第二步：看清楚咯，接下来我们就要开始演示啦

首先第一步：我们需要先下载一下swiper这个插件（如果有需要的，可以直接私信，这里就不教大家如果下载了），下载好后，记得要找到这两个东西，这两个东西是必不可少的哦

第三步：然后把下方代码复制到你的代码中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="swiper">
			<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>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
	</body>
</html>

第四步：上面的只是一个框架布局接下来我们引入关键的css文件和js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
	 <script src="dist/js/swiper-bundle.min.js"></script>
	<body>
		<div class="swiper">
			<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>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>

			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
	</body>
</html>

这两个文件一定要引入，这是关键，别的文件引入不引入看你需要，这两个必需有

第五步：重点又来咯，仔细看，接下来我们要把官方给的js文件也复制过来

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>

第六步：我们现在基本上已经完成了所有的步骤，接下来添加图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
	<script src="dist/js/swiper-bundle.min.js"></script>
	<body>
		<div class="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></div>
				<div class="swiper-slide"><img src="./img/img1.png" alt=""></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>
	</body>
</html>

需要几个图片轮播就加几个，记得自己根据自己需要该一下swiper的大小，图片的话设置100%即可。

Tea-pd

关注

14
点赞
踩
19

收藏

觉得还不错? 一键收藏
10
评论
学习前端前期想做出轮播图效果之swiper插件的介绍

swiper是什么？ swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。基本用法 swiper使用需要两个文件，一个是swiper.css，里面..swiper是什么？ swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。基本用法 swiper使用需要两个文件，一个是swiper.css，里面..swiper是什么？ swiper是一款轻量级的
复制链接

扫一扫