Go to comments

轮播图库 Swiper

一、基本使用

Swiper.js 比较成熟,可以提升我们开发效率,是国人开发的一股非常方便的第三方库,支持各种姿势的轮播,很多大厂也是在移动端网页中使用它


使用方法
https://swiper.com.cn/usage/index.html

cdn
https://swiper.com.cn/cdn/index.html


下载 swiper 文件夹

https://www.swiper.com.cn/download/index.html

code 文件夹是核心代码

demo说明

navigation 有两边左右箭头按钮

pagination 有下面的小按钮

autoplay 自动播放

effect-cube 立方块效果

effect-cards 翻扑克牌效果

infinite-loop 无限轮播


基本使用

1. 从Swiper7开始,最外层容器默认类名由 .swiper-container 变更为 .swiper

2. 引入css 和 js文件

3. 初始化  new Swiper() ,参数 .swiper 是最外层容器,参数 {} 对象里面配置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>swiper</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      color: #fff;
      /* background: #fff; */
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>
<body>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background:tomato;">Slide 1</div>
      <div class="swiper-slide" style="background:#CA4040;">Slide 2</div>
      <div class="swiper-slide" style="background:#FF8604;">Slide 3</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 src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  <script>

    var mySwiper = new Swiper ('.swiper', {
      direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      spaceBetween: 30, // 滚动之间的间隔
      centeredSlides: false, // 什么什么会居中???
      preventClicksPropagation : false, // 拖动时阻止冒泡
      // 自动滑动
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      // 如果需要分页器(小圆点)
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
      // 鼠标滚动,默认为false不滚动(配合上面的 loop 循环)
      mousewheel: true,
      // 键盘
      keyboard : true,
    });

  </script>

</body>
</html>


移动端的轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>swiper轮播图</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<style>
  *{
    margin: 0;
  }
  .swiper {
    width: 100vw;
    height: 32vh;
  }
  .swiper-slide{
    text-align: center;
    font-size: 1.5rem;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img{
    display: block;
    width: 100vw;
    height: 32vh;
    object-fit: cover;
  }
  /* 小圆点样式 */
  .swiper-pagination-bullet{
    background: #fff;
    opacity: .7;
  }
  .swiper-pagination-bullet-active{
    background: #ff6600;
    opacity: 1;
  }

</style>
</head>
<body>

  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0005.jpg" alt=""></div>
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0006.jpg" alt=""></div>
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0007.jpg" alt=""></div>
    </div>

    <div class="swiper-pagination"></div>

  </div>

  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
  <script>

    var mySwiper = new Swiper ('.swiper', {
      loop: true, // 循环模式选项,true为无限循环
      pagination: {
        el: '.swiper-pagination',
        clickable :true, // 点击时候自动切换
      },
    });

  </script>
</body>
</html>


 @media (min-width:640px)  使用媒体查询,在PC端也能保持比例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>swiper 轮播图</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  *{
    margin: 0;
  }
  .swiper {
    width: 100vw;
    height: 32vh;
  }
  .swiper-slide{
    text-align: center;
    font-size: 1.5rem;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-slide img{
    display: block;
    width: 100%;
    height: 32vh;
    object-fit: cover;
  }
  /* 小圆点样式 */
  .swiper-pagination-bullet{
    background: #fff;
    opacity: .7;
  }
  .swiper-pagination-bullet-active{
    background: #ff6600;
    opacity: 1;
  }
  /* 大于 640 生效 */
  @media (min-width:640px){
    .swiper {
      width: 640px;
      height: 320px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper-slide img{
      display: block;
      height: 320px;
      object-fit: cover;
    }
  }

</style>
</head>
<body>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0005.jpg" alt=""></div>
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0006.jpg" alt=""></div>
      <div class="swiper-slide"><img src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/pictufe/alph0007.jpg" alt=""></div>
    </div>

    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>

    var mySwiper = new Swiper ('.swiper', {
      loop: true, // 循环模式选项,true为无限循环
      pagination: {
        el: '.swiper-pagination',
        clickable :true, // 点击时候自动切换
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>


二、滑屏

横向滑屏

150.freemode.html 横向滑屏

freeMode: true 自由模式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>freemode 横向滑屏</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
  <style>
    /* 必须的样式 */
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper {
      width: 100%;
      height: 30%;
    }
    /* 自己的样式 */
    .swiper .swiper-slide{
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>

  <!-- 要外层必须是swiper样式,mySwiper区分多个滚动 -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background:tomato;">Slide 1</div>
      <div class="swiper-slide" style="background:#CA4040;">Slide 2</div>
      <div class="swiper-slide" style="background:#FF8604;">Slide 3</div>
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var mySwiper = new Swiper ('.mySwiper', {
      slidesPerView: 4, // 每页(视口)显示几张图片,默认为3
      spaceBetween: 10, // 间隔默认为30 
      freeMode: true, // 自由模式,默认为true。true意思是图片可以在屏幕边缘滑动一半,false自动吸附的效果
      pagination: { // index索引小圆点
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>

</body>
</html>


竖向滑屏

160.scroll-cnmtainer.html 竖向滑屏(垂直滚动)

freeMode: true 自由模式(滑屏使用这个效果好),只使用一个 swiper-slide

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>scroll-cnmtainer 垂直滚动</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  /* swiper必须的样式 */
  html,
  body {
    position: relative;
    height: 100%;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    font-size: 18px;
    height: auto;
    box-sizing: border-box;
  }

  /* 自己的样式 */
  body{
    margin: 0;
  }
  #header{
    height: 50px;
    width: 100%;
    background-color: #ddd;
    position: fixed;
    top: 0;
    z-index: 100;
  }
  #footer{
    height: 50px;
    width: 100%;
    background-color: #ddd;
    position: fixed;
    bottom: 0;
    z-index: 100;
  }
  p{
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>

  <div id="header">header</div>

  <section class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="padding:60px 0;"><!-- 在 swiper-slide 设置上下margin -->

        <p style="background:tomato;height: 500px;"></p>
        <p style="background:deepskyblue;height: 500px;"></p>
        <p style="background:orange;height: 500px;"></p>
        <p style="background:deeppink;height: 500px;"></p>

      </div>
    </div>
    <div class="swiper-scrollbar"></div>
  </section>

  <div id="footer">footer</div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      direction: "vertical", // 垂直
      slidesPerView: "auto", // 
      freeMode: true, // 自由模式(顺着滑屏必须要这个好,以 swiper-slide 为滑动单位)
      scrollbar: { // 侧边滚动条
        el: ".swiper-scrollbar",
      },
      mousewheel: true, // 默认值为true,表示允许鼠标滚动
    });
  </script>

</body>
</html>


横竖组合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="view" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title>横竖组合</title>
<link rel="stylesheet" href="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.css">
<style>
  /* swiper必须的样式 */
  html,
  body {
    position: relative;
    height: 100%;
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    height: auto;
  }
  /* 自己的样式 */
  body{
    margin: 0;
    background: #f5f5f5;
    color: #fff;
  }
  #header{
    height: 50px;
    width: 100%;
    background-color: #e64a48;
    position: fixed;
    top: 0;
    z-index: 100;
    box-shadow: 0 3px 6px rgba(120, 120, 120, .5);
  }
  #footer{
    height: 50px;
    width: 100%;
    background-color: #fff;
    border-top:1px solid #e7e9e1;
    position: fixed;
    bottom: 0;
    z-index: 100;
    box-shadow: 0 -3px 6px rgba(150, 150, 150, .5);
  }
  .horizontal{
    height: 250px;
    margin-bottom: 10px;
  }
  .slideContainer{
    margin-top: 60px;
    margin-bottom: 60px;
  }
</style>
</head>
<body>

  <div id="header">header</div>

  <section class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide slideContainer">
        <!-- 横向滑屏 -->
        <div class="horizontal">
          <div class="swiper mySwiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/167034331268543.jpg) no-repeat center/cover;">Slide 1</div>
              <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/167034291138784.jpg) no-repeat center/cover;">Slide 2</div>
              <div class="swiper-slide" style="background:url(http://ruyic.com/blog/uploads/image/202212/166989798079799.jpg) no-repeat center/cover;">Slide 3</div>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div style="height:600px; margin-bottom:10px; background:url(http://ruyic.com/blog/uploads/image/202304/168195371837071.jpg) no-repeat center/cover;"></div>
        <!-- 横向滑屏 -->
        <div class="horizontal">
          <div class="swiper mySwiper2">
            <div class="swiper-wrapper">
              <div class="swiper-slide" style="background:tomato;">Slide 1</div>
              <div class="swiper-slide" style="background:#CA4040;">Slide 2</div>
              <div class="swiper-slide" style="background:#FF8604;">Slide 3</div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
        <!-- 内容 -->
        <div style="height:400px;background:url(http://ruyic.com/blog/uploads/image/202212/167128700952936.gif) no-repeat center/cover;"></div>
      </div>
    </div>
  </section>

  <div id="footer">footer</div>

  <script src="https://20180416-1252237835.cos.ap-beijing.myqcloud.com/common/cdn/swiper-bundle.min.js"></script>
  <script>

    // 初始化滑动
    function initSlide() {
      new Swiper('.mySwiper', {
        direction: "vertical",
        slidesPerView: "auto",
        freeMode: true,
        momentumRatio: 2,
        momentumVelocityRatio: 5
      });

      new Swiper('.mySwiper2', {
        slidesPerView: "auto",
        freeMode: true,
        momentumRatio: 2,
        momentumVelocityRatio: 5
      });
    }

    initSlide();

  </script>

</body>
</html>


解决Swiper不能滑动的问题

var mySwiper = new Swiper('.swiper-container',{
  pagination : '.swiper-pagination',
  paginationClickable: true,
  longSwipesRatio: 0.3,
  touchRatio:1,
  observer:true,//修改swiper自己或子元素时,自动初始化swiper
  observeParents:true,//修改swiper的父元素时,自动初始化swiper
});

转自:https://www.qyyshop.com/info/303613.html



Leave a comment 0 Comments.

Leave a Reply

换一张