Swiper 触摸滑动插件

最新推荐文章于 2024-05-31 10:07:20 发布

凌冰_

最新推荐文章于 2024-05-31 10:07:20 发布

阅读量329

点赞数

分类专栏：前端插件

本文链接：https://blog.csdn.net/hlx20080808/article/details/107769641

版权

前端插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！

官方：https://www.swiper.com.cn/

官方资源下载：https://www.swiper.com.cn/download/index.html 最新版本6.0

官方中文教程：https://www.swiper.com.cn/usage/index.html

官方API文档：https://www.swiper.com.cn/api/index.html

引入资源：

<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />

		<style type="text/css">
			/*容器*/
			.swiper-container {
				width: 700px;
				height: 350px;
				
				/*背景图片*/
				background: url(img/bg_1.jpg);
				background-size: cover;
				
				/*分页器颜色*/
   				 --swiper-pagination-color:white;/* 两种都可以 */
			
		      /*前进后退按钮*/
		       --swiper-navigation-color: white;/* 单独设置按钮颜色 */
		      --swiper-navigation-size: 40px;/* 设置按钮大小 */
			
			}
			
			.swiper-container img{
				width: 100%;
			}
		</style>
	</head>
	<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209683_1180x600.png?max_age=31536000"/>
				</div>
				<div class="swiper-slide">
					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596209441_1180x600.png?max_age=31536000"/>
				</div>
				<div class="swiper-slide">
					<img src="https://imgcache.gtimg.cn/ACT/svip_act/act_img/public/202007/1596122566_0e54d4ac-5ddb-48f8-838e-61b36271f529.png?max_age=31536000"/>
				</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-->
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  	//默认是横向的;
//  direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
//  autoplay: true,//可选选项，自动滑动
	autoplay: {
	    delay: 1000,     //1s
	    stopOnLastSlide: false,
	    disableOnInteraction: true,
	    },
	    //切换效果
//  effect : 'cube',
//  effect : 'flip',
//  effect : 'coverflow',
//  slidesPerView: 3,
//  centeredSlides: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
//  scrollbar: {
//    el: '.swiper-scrollbar',
//  },
  })        
  </script>

效果：模仿QQ会员： https://vip.qq.com/

凌冰_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Swiper 触摸滑动插件

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！官方：https://www.swiper.com.cn/ 官方资源下载：https://www.swiper.com.cn/download/index.html 最新版...
复制链接

扫一扫

专栏目录