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

编程语言

14.htmlayout CSS reset 一统界面样式

2016-12-13 12:39:26

4 条回复 A文章作者 M管理员
  1. I do trust all the ideas youve presented in your post They are really convincing and will definitely work Nonetheless the posts are too short for newbies May just you please lengthen them a bit from next time Thank you for the post

  2. 騰龍娱楽实体注册链接

  3. 打开我的主页有网址

有新私信 私信列表
搜索