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();
    }
wordpress

【WordPress美化】 代码高亮 适用于各种主题 根据页面自动加载代码高亮JS和CSS文件 并处理Pre标签

2020-11-29 13:07:19

涨姿势

知乎的32个短小精悍的神回复

2016-7-18 11:56:19

3 条回复 A文章作者 M管理员
  1. 騰龍娱楽实体注册链接

  2. 打开我的主页有网址

有新私信 私信列表
搜索