jq swiper(各种轮播图样式)

客官°小女子只卖身不卖艺 2021-07-24 12:32 667阅读 0赞

具体样式教程查看地址[swiper][]  
各种样式引用地址[各种样式][Link 1]

引入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>

[swiper]: https://3.swiper.com.cn/usage/index.html
[Link 1]: https://3.swiper.com.cn/api/Effects/2015/0308/193.html