jq swiper(各种轮播图样式)

最新推荐文章于 2024-06-21 23:12:22 发布

神奇大叔

最新推荐文章于 2024-06-21 23:12:22 发布

阅读量3.2k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103534557

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

具体样式教程查看地址swiper
各种样式引用地址各种样式

引入swiper.min.css文件
    swiper.jquery.min.js 文件

步骤：安装教程引入框架，然后再根据样式地址中的样式可以添加其他样式
添加的其他样式写在js代码域里，方式为参数名:‘样式名’

多个轮播图冲突，只需给其他轮播图添加个id区分即可
代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
				.swiper-container{
					width:560px;
					height: 300px;
					margin: 100px auto;
					border: solid 1px orange;
				}
		</style>
		
		<script src="js/jquery-3.4.1.js"></script>
		<link href="css/swiper.min.css" rel='stylesheet' />
		<script src="js/swiper.jquery.min.js"></script>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="img/0.jpg" alt="" /></div>
		        <div class="swiper-slide"><img src="img/1.jpg" alt="" /></div>
		        <div class="swiper-slide"><img src="img/2.jpg" alt="" /></div>
		        <div class="swiper-slide"><img src="img/3.jpg" alt="" /></div>
		        <div class="swiper-slide"><img src="img/4.jpg" 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>
		<script>
       
				  var mySwiper = new Swiper ('.swiper-container', {
				   // direction: 'vertical',
				    loop: true,
//----------------------------------------------------------------------				    
				    //引用api文档其他效果
				    effect:'cube',
				    autoplay:1000,
				    // 如果需要分页器
				    pagination: '.swiper-pagination',
				    
				    // 如果需要前进后退按钮
				    nextButton: '.swiper-button-next',
				    prevButton: '.swiper-button-prev',
				    
				    // 如果需要滚动条
				    scrollbar: '.swiper-scrollbar',
				  })        
  </script>
</body>
		</script>
	</body>
</html>