swiper大法好

swiper大法好

在html中是这么写的:
<!-- 轮播图 -->
	<div class="swiper-container">
      <div class="swiper-wrapper">
    
    		 <!-- 第一张是卖水果 -->
        <div class="swiper-slide">
        <img src="img/lunboone.jpg
        "  alt="sorry">
        </div>
          
           <!-- 第二张是葡萄 -->
         <div class="swiper-slide">
        <img src=" http://pic1.win4000.com/wallpaper/2017-10-31/59f8232c565e7.jpg"  alt="sorry">
         </div>
         
          
          <!-- 第三张是卖水果 -->
         <div class="swiper-slide">
         <img src="img/lunbothree.jpg
        "  alt="sorry">
         </div>
          
          
            <!-- 第四张是水果 -->
        <div class="swiper-slide">
        <img src="img/lunbofour.jpg
        "  alt="sorry">
        </div>
         
          
          <!-- 第五张是山楂 -->
        <div class="swiper-slide">
        <img src="img/lunbofive.jpg
        "  alt="sorry">
        </div>
       
</div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
       
</div>

css这么调节样式
container相当于一个大的容器
.swiper-container{
		width:1200px;
		height:500px;
		margin-top:20px;
		--swiper-navigation-color: orange;
        --swiper-navigation-size: 80px;	
	}
	这个是swiper的button按钮
	.swiper-button-prev{
		width:80px;
		height:60px;
	}
	这个是container里的img
   .swiper-container img{
	width:1200px;
	height:fit;
	line-height:500px;
	}

在js中是这么写
//首页轮播图
var mySwiper = new Swiper ('.swiper-container', {
   
    loop: true, // 循环模式选项
    autoplay:true,//自动播放
      
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })