Swiper.JS 8.3 轮播图幻灯片插件使用记录

官网下载

英文官网：https://swiperjs.com
中文官网：https://www.swiper.com.cn/
版本：Swiper 8.30

HTML 代码

<div class="swiper swiper-1"><!--外层-->
    <div  class="swiper-wrapper"><!--wrapper 层-->
     <div class="swiper-slide"><!--slide-->
             
     </div>
     <div class="swiper-slide">
            
     </div>
</div>
<div class="swiper-pagination" slot="pagination"></div><!--圆点按钮-->
<div class="swiper-button-prev" slot="button-prev"></div><!--左右按钮-->
<div class="swiper-button-next" slot="button-next"></div><!--左右按钮-->
</div>

JS 代码

    let slider = document.querySelector('.swiper-1');
    mySwiper = new Swiper(slider, { //初始化，具体参数请参考官网
       autoplay: {  //自动播放 
              delay:4000,//延时
          },
       roundLengths : true, //宽度取整，防止边界模糊
       observer: true, //修改 swiper 自己或子元素时，自动初始化 swiper
       observeParents: true, //修改 swiper 的父元素时，自动初始化 swiper
       //width: window.innerWidth,//设置宽度为全屏
       breakpoints: {   //设置断点宽度，当屏幕宽度大于等于
           1024: {
        	slidesPerView: 4,  //
        	slidesPerGroup: 4, //编组                
                spaceBetween: 10,//间距   
          },
          768: {
              width: undefined,//取消 width，恢复自适应
          },
    })
    //鼠标移入暂停、移除播放。
    mySwiper.el.onmouseover = function(){
	mySwiper.autoplay.stop();
    }
    mySwiper.el.onmouseout = function(){
	mySwiper.autoplay.start();
    }
    //当幻灯片<=时，自动销毁。
    if(mySwiper.slides.length<=2){
 	 mySwiper.destroy();
    }