Swiper之最专业轮播图专栏

最新推荐文章于 2023-03-09 19:18:40 发布

香槟不喝酒

最新推荐文章于 2023-03-09 19:18:40 发布

阅读量547

点赞数 13

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/m0_58501790/article/details/125028076

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Swiper完全免费并开源且功能强大

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡,从此开发者再也不用造轮子了鸭。

swiper中文网: https://www.swiper.com.cn

在这里插入图片描述

浅分享一下轮播效果图：

cube(方块)左右木马旋转:
在这里插入图片描述
vertical(垂直)从下往上播放：

在这里插入图片描述

swiper结构如下

在这里插入图片描述

名词	解释
Swiper	整个滑动对象
container	container容器，包括滑动块（slides）的封套（wrapper)、分页器(pagination)、前进后退按钮(prevButton，nextButton)等
wrapper	触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移
slider	切换的滑块，可以包含文字、图片、html元素或另外一个Swiper
pagination	分页器，指示slide的数量和当前活动的slide
active slide	活动滑块，即当前看到的(visible)slide，当可视slide不止一个时，默认最左边那个是活动滑块

swiper下载链接提取码：sp84
cdn链接
解压文件如下：需要引入swiper-bundle.min.css，swiper-bundle.min.js
在这里插入图片描述

Swiper 使用方法()：

先加载swiper-bundle.min.css，再加载swiper-bundle.min.js，

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

添加HTML内容。Swiper7及以后版本的默认容器是’.swiper’，Swiper6之前是’.swiper-container’。

<div class="swiper">
    <div class="swiper-wrapper">
    	<!-- 在这个盒子中装入要轮播的图片 -->
        <div class="swiper-slide"><img src="imgs/01.png" ></div>
        <div class="swiper-slide"><img src="imgs/02.png" ></div>
        <div class="swiper-slide"><img src="imgs/03.png" ></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>

3.### 强烈建议设置swiper大小与图片大小一样

.swiper {
    width: 1100px;
    height: 400px;
}

4.初始化Swiper

<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 lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"> 
	<style type="text/css">
		.swiper {
			/* 图片和容器大小一样 */
		    width: 1100px;
		    height: 400px;
			--swiper-theme-color:#aaa;        //按钮风格
			--swiper-navigation-color:#eee;  //按钮颜色
			--swiper-navigation-size:40px;	//按钮大小
			
		}
	</style>
</head>
<body>
	<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
	<div class="swiper">
	    <div class="swiper-wrapper">
			<!-- 在这个盒子中装入要轮播的图片 -->
	        <div class="swiper-slide"><img src="imgs/01.png" ></div>
	        <div class="swiper-slide"><img src="imgs/02.png" ></div>
	        <div class="swiper-slide"><img src="imgs/03.png" ></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容器之外 -->
	
	<script>        
	  var mySwiper = new Swiper ('.swiper', {
	    //direction: 'vertical',// 垂直切换选项vertical
	    loop: true, // 循环模式选项
	    autoplay:true,//自动播放
		speed:1000, //一秒
		grabCursor:true, //实现抓手光标
		effect:'cube',//(slide(默认),fade(淡入) , cube(方块),coverflow（3D流）,flip（3D翻转）)
	    // 如果需要分页器
	    pagination: {
	      el: '.swiper-pagination',
	    },
	    
	    // 如果需要前进后退按钮
	    navigation: {
	      nextEl: '.swiper-button-next',
	      prevEl: '.swiper-button-prev',
	    }
	    
	    // 如果需要滚动条
	  //   scrollbar: {
	  //     el: '.swiper-scrollbar',
	  //   },
	   })        
	  </script>
</body>
</html>