Swiper插件

最新推荐文章于 2024-12-19 17:19:21 发布
原创 最新推荐文章于 2024-12-19 17:19:21 发布 · 419 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #javascript #html
本文展示了如何使用Swiper库创建轮播图，包括基本配置、事件监听、API控制以及分页器、导航按钮和滚动条的实现。通过示例代码详细解释了Swiper的初始化和方法调用，提供了一种高效构建H5页面前端交互的方法。

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper 的常用 API</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 375px;
        height: 300px;
      }
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80px;
      }
    </style>
  </head>
  <body>
    <div id="swiper" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">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>

    <button id="btn-prev">上一个</button>
    <button id="btn-next">下一个</button>
    <button class="btn-index" data-index="0">1</button>
    <button class="btn-index" data-index="1">2</button>
    <button class="btn-index" data-index="2">3</button>

    <script src="./swiper-bundle.min.js"></script>
    <script>
      // 1.Swiper 初始化
      // 用于初始化一个 Swiper，返回初始化后的 Swiper 实例
      // const swiperInstance = new Swiper(swiperContainer, parameters);

      // 2.基础配置
      // initialSlide 设定初始化时 slide 的索引
      // direction 滑动方向
      // speed 切换速度
      // effect 切换效果，默认为位移切换
      // grabCursor 设置为 true 时，鼠标覆盖 Swiper 时指针会变成手掌形状
      // slidesPerView 设置 slider 容器能够同时显示的 slide 数量
      // freeMode 设置为 true 则变为 free 模式，slide 会根据惯性滑动可能不止一格且不会贴合（滑动菜单）
      // loop 会在原本 slide 前后复制若干个(默认一个) slide，并在合适的时候切换，让 Swiper 看起来是循环的
      // on 注册事件

      // 3.事件
      // init 初始化后执行
      // slideChangeTransitionStart 从当前 slide 开始过渡到另一个 slide 时执行
      // slideChangeTransitionEnd 从一个 slide 过渡到另一个 slide 结束时执行

      // 4.属性
      // activeIndex 返回当前 slide 的索引
      // previousIndex 返回上一个 slide 的索引，切换前的索引
      // width/height 获取 swiper 容器的宽/高

      // 5.方法
      // slideNext()/slidePrev() 切换到下/上一个滑块
      // slideTo() 控制 Swiper 切换到指定 slide

      // 6.控制
      // autoplay 自动切换
      // pagination 使用分页器导航
      // navigation 使用前进后退按钮来控制 Swiper 切换
      // scrollbar 为 Swiper 增加滚动条
      // keyboard 开启键盘来控制 Swiper 切换
      // mousewheel 开启鼠标滚轮控制 Swiper 切换

      const mySwiper = new Swiper('#swiper', {
        initialSlide: 0,
        direction: 'horizontal', // 默认，水平切换
        // direction: 'vertical' // 垂直切换
        speed: 300, // 默认，300
        // effect: 'slide', // 默认，位移切换
        // effect: 'fade', // 淡入
        // fadeEffect: {
        //   crossFade: true
        // },
        // effect: 'cube' // 方块
        // effect: 'coverflow' // 3d流
        // effect: 'flip' // 3d翻转
        grabCursor: true,
        // slidesPerView: 2
        // freeMode: true
        // loop: true,
        on: {
          init: function (swiper) {
            // console.log(this === swiper);
            // console.log('init');
            // console.log(this);
            console.log(this.activeIndex);
            console.log(this.previousIndex);
            console.log(this.width, this.height);
          },
          slideChangeTransitionStart: function (swiper) {
            // console.log(this === swiper);
            // console.log('slideChangeTransitionStart');
            console.log(this.activeIndex);
            console.log(this.previousIndex);
          },
          slideChangeTransitionEnd: function (swiper) {
            // console.log(this === swiper);
            // console.log('slideChangeTransitionEnd');
          }
        },

        // autoplay: true,
        // autoplay: {
        //   delay: 1000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true
        // }

        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },

        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
          dragSize: 30
        },

        keyboard: true,
        mousewheel: true
      });

      const $prevBtn = document.getElementById('btn-prev');
      const $nextBtn = document.getElementById('btn-next');

      $prevBtn.addEventListener(
        'click',
        () => {
          mySwiper.slidePrev();
        },
        false
      );
      $nextBtn.addEventListener(
        'click',
        () => {
          mySwiper.slideNext();
        },
        false
      );

      const $indexBtns = document.querySelectorAll('.btn-index');

      for (const $el of $indexBtns) {
        $el.addEventListener(
          'click',
          () => {
            mySwiper.slideTo($el.dataset.index);
          },
          false
        );
      }
    </script>
  </body>
</html>

切换导航条内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab 切换</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
      }
      a {
        text-decoration: none;
        color: #333;
      }
      a:hover {
        color: #409eff;
      }
      li {
        list-style: none;
      }
      body {
        padding: 24px;
      }
      .tab-header {
        display: flex;
        justify-content: space-between;
        line-height: 30px;
      }
      .tab-label-active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }
      .tab-item {
        line-height: 40px;
        border-bottom: 1px solid #ebebeb;
      }
    </style>
  </head>
  <body>
    <div id="tab-header" class="tab-header">
      <a href="javascript:;" class="tab-label tab-label-active" data-index="0"
        >在线演示</a
      >
      <a href="javascript:;" class="tab-label" data-index="1">中文教程</a>
      <a href="javascript:;" class="tab-label" data-index="2">获取 Swiper</a>
    </div>
    <div id="tab-content" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <ul>
            <li class="tab-item">Swiper 基础演示</li>
            <li class="tab-item">Swiper 精彩应用（移动）</li>
            <li class="tab-item">Swiper 精彩应用（PC）</li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul>
            <li class="tab-item">Swiper 使用方法</li>
            <li class="tab-item">Swiper Animate 使用方法</li>
            <li class="tab-item">Swiper 与 DOM</li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul>
            <li class="tab-item">下载 Swiper</li>
            <li class="tab-item">Swiper CDN 地址</li>
          </ul>
        </div>
      </div>
    </div>

    <script src="./swiper-bundle.min.js"></script>
    <script>
      const $tabHeader = document.getElementById('tab-header');
      const $tabLabels = $tabHeader.querySelectorAll('.tab-label');

      const tabSwiper = new Swiper('#tab-content', {
        autoplay: true,
        on: {
          slideChangeTransitionEnd() {
            // console.log(this.activeIndex);
            for (const $el of $tabLabels) {
              $el.classList.remove('tab-label-active');
            }
            $tabLabels[this.activeIndex].classList.add('tab-label-active');
          }
        }
      });

      // 点击切换选项卡--事件代理
      $tabHeader.addEventListener(
        'click',
        evt => {
          const $el = evt.target;

          if ($el.classList.contains('tab-label')) {
            tabSwiper.slideTo($el.dataset.index);
          }
        },
        false
      );
    </script>
  </body>
</html>

 

页面滑动切换

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面滑动切换</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .swiper-container {
        width: 100vw;
        height: 100vh;
      }
      .swiper-slide {
        overflow: hidden;
        position: relative;
        display: flex;
        justify-content: center;
      }
      .logistics-slide {
        background-color: #57cfe1;
      }
      .purchase-slide {
        background-color: #fe8e34;
      }
      .logistics-text,
      .purchase-text {
        position: absolute;
        width: 214px;
        opacity: 0;
        transition: all 1s 0.5s;
      }
      .logistics-text-active,
      .purchase-text-active {
        opacity: 1;
      }
      .logistics-text {
        top: 50px;
      }
      .purchase-text {
        bottom: 40px;
      }
      .logistics-phone,
      .logistics-person,
      .purchase-phone,
      .purchase-person {
        position: absolute;
        width: 180px;
        transition: all 0.5s;
      }
      .logistics-phone {
        bottom: 0;
        transform: translate3d(-1000px, 0, 0);
      }
      .logistics-phone-active {
        transform: translate3d(-70px, 0, 0);
      }
      .logistics-person {
        bottom: 0;
        transform: translate3d(1000px, 0, 0);
      }
      .logistics-person-active {
        transform: translate3d(70px, 0, 0);
      }
      .purchase-person {
        top: 50px;
        transform: translate3d(-70px, -1000px, 0);
      }
      .purchase-person-active {
        top: 50px;
        transform: translate3d(-70px, 0, 0);
      }
      .purchase-phone {
        top: 120px;
        transform: translate3d(70px, 1000px, 0);
      }
      .purchase-phone-active {
        top: 120px;
        transform: translate3d(70px, 0, 0);
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide logistics-slide">
          <img
            src="./images/logistics-phone.png"
            alt=""
            class="logistics-phone"
            id="logistics-phone"
          />
          <img
            src="./images/logistics-person.png"
            alt=""
            class="logistics-person"
            id="logistics-person"
          />
          <img
            src="./images/logistics-text.png"
            alt=""
            class="logistics-text"
            id="logistics-text"
          />
        </div>
        <div class="swiper-slide purchase-slide">
          <img
            src="./images/purchase-phone.png"
            alt=""
            class="purchase-phone"
            id="purchase-phone"
          />
          <img
            src="./images/purchase-person.png"
            alt=""
            class="purchase-person"
            id="purchase-person"
          />
          <img
            src="./images/purchase-text.png"
            alt=""
            class="purchase-text"
            id="purchase-text"
          />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <script src="./swiper-bundle.min.js"></script>
    <script>
      // 批处理
      const ids = [
        ['logistics-phone', 'logistics-person', 'logistics-text'],
        ['purchase-phone', 'purchase-person', 'purchase-text']
      ];

      new Swiper('.swiper-container', {
        direction: 'vertical',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        mousewheel: true,
        on: {
          init() {
            // 在初始化时触发一次 slideChangeTransitionEnd 事件
            this.emit('slideChangeTransitionEnd');
          },
          slideChangeTransitionEnd() {
            // console.log(this.activeIndex);
            for (const id of ids[this.activeIndex]) {
              const $el = document.getElementById(id);
              $el.classList.add(`${id}-active`);
            }

            if (typeof this.previousIndex !== 'undefined') {
              for (const id of ids[this.previousIndex]) {
                const $el = document.getElementById(id);
                $el.classList.remove(`${id}-active`);
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

页面切换到下一张时把上一张样式去除 

 

 

 

 

完全指南：如何使用 Swiper 插件实现强大的轮播效果
阿猫故乡的博客
12-04 1万+
使用 Swiper 插件有以下好处：简单易用：Swiper 核心库提供了丰富的 API 供使用者随意配置，同时支持自定义事件和回调函数，使得使用起来非常方便。多种轮播效果：Swiper 支持多种轮播效果，如滑动、淡入淡出等，且易于定制。高性能：Swiper 对于移动端设备做了很好的兼容性处理，通过 CSS3 实现动画，使得页面流畅、响应迅速。支持响应式布局：Swiper 提供了响应式布局解决方案，可以轻松适配不同尺寸设备并保持良好的用户体验。
swiper里面的slide和按钮联动的效果
Tfishupupup的博客
01-17 1258
需要点击某个元素切换到相应的slide，该元素也会产生相应的样式改变。 使用swiper的pagination设置项，可以自定义设置pagination的样式和效果 pagination: { el: '.swiper-pagination', clickable: 'true', renderBullet: function (index, className) { ...
解决swiper@6.8.4中swiper高度的问题
tuzi007a的博客
03-22 4119
说明 本文是关于swiper@6.8.4中出现的问题，其他版本未知。 出现的问题是 swiper-container和swiper-slide的高度远远超出最外层盒子的高度， 而且这个高度非常的离谱。本文就是为了解决这个问题，以及说明一些关于高度的配置。 本次轮播图示例是上下轮播的。 问题阐述 这是封装好的一个轮播图： export const SwiperComp = (props) => { const { datas, texts } = props return <Sw
Swiper 实现指定的 slide 显示位置
blog
03-22 7581
文章目录前言一、hashNavigation二、slideTo总结 前言 在日常的 Swiper.js 开发当中，我们难免需要实现：当某个按钮的点击，然后显示相对应的 slide 模块，类似分页器的。本文将会从Swiper的内置参数hashNavigation 与 slideTo() 方法，两种实现方式介绍。 一、hashNavigation 设置散列导航选项，或true使用默认值。为每个slide增加散列导航（有点像锚链接）。 还需要在每个slide处增加data-hash属性。 这样当你的sw
2021-6-25 工作记录 Swiper--解决swiper滑动迟钝现象+实现swiper-slide-active居中+轮播到某slide时，修改该slide展示的样式
weixin_48850734的博客
06-29 3697
一、解决swiper滑动迟钝现象 对应代码： observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper 二、实现swiper-slide-active居中 对应代码： centeredSlides : true, // 设定为true时，active slide会居中，而不是默认状态下的居左。 slidesPerView :1.5, // 设置sli
swiper插件
梁山伯_的博客
09-11 1796
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 下载Swiper 点击下载相应的文档 Swip
jquery swiper插件的用法
A_aspectJ的博客
09-03 2079
引入Swiper文件‌：下载完成后，将Swiper的CSS和JS文件引入到项目中。通常，这两个文件分别是swiper-bundle.min.css和swiper-bundle.min.js（文件名可能因版本而异）。添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。
Swiper插件的使用和介绍
m0_53850109的博客
01-26 4504
Swiper介绍 swiper是一款开源的解决前端开发中触摸滑动案例的插件 swiper官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发https://www.swiper.com.cn/ swiper的使用 使用swiper首先要下载swiper 下载完成后在官网在线演示中找到你所需要的 这里我选择了基础演示中的010 首先在你下载的压缩包中找到010的demo文件 打开后点击鼠标右键打开网页源代码 ...
Swiper插件简单使用
汇而不置的博客
04-10 2414
Swiper插件简单使用 官网链接    https://www.swiper.com.cn/api/index.html 源码cdn引入 swiper5 <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet"...
使用 swiper 做轮播图
17 的博客
02-09 8993
虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。
vue的H5页面滑动翻页插件-swiper使用方法
最新发布
lanlanhug的博客
12-19 1888
5. 假如要实现每个页面中有个‘向上滑动’提示标，需要考虑最后一个页面中不展示这个标识，而我们使用了swiper虚拟化，此时插件提供的@reachEnd方法是不起作用的，因为此时每一页理论上来说都是最后一页，所以我们只能在最后一个组件中触发方法回调。使用动态组件的好处：某些页面可能在特定条件下不展示，我们可以写入逻辑来控制slideList的数据，这样virtual-index都能对应到正确的下标。简单实用，可实现H5页面的丝滑翻页，我是在做公司app年度报告功能时使用的（类似网易云个人年终总结那种动画）
swiper轮播图插件的使用步骤
m0_73957003的博客
05-28 1277
1.进入官网，找到喜欢的样式，复制源代码，然后该js和css文件路径。2.根据API文档找到自己想要的功能。
原来swiper的这个swiper-slide的间距调的这儿！
热门推荐
m0_65292523的博客
08-16 1万+
想要修改swiper-slide间隔距离可以修改spaceBetween的值，可设正值和负值，正值越大，距离越宽，负值则会变小。
swiper一屏切换，内部滚动不影响slide切换
dsadada23的博客
10-11 993
一屏swiper ，高度100vh，还要内部有滚动
Swiper 中常见的属性以及方法
qq_69282350的博客
11-03 7177
*mySwiper.autoplay.stop() mySwiper.autoplay.start()**一个开始轮播，一个暂停轮播，不多说，那个mySwiper应该是可以修改的，名字是你初始化的swiper名字。**disableOnInteraction: ** 在设置false时，你对轮博图操作不会停止循环，而 true，在你对轮博图操作时会停止自动轮播。**renderBullet: ** 设置了这个属性你就可以设置自己的分页器样式，该属性是一个函数类型，参数是下标索引和类名。
swiper插件的使用方法
weixin_61665636的博客
11-17 5375
1.swiper的介绍 2.为什么使用swiper 3.Swiper的使用方法 4. Swiper Animate的使用方法 5.在常用框架中使用Swiper
swiper轮播图使用方法（详解）
没有简介
05-18 6550
提示：这里对文章进行总结：反正也不会有人看到这里，所以我就写我自己的！！！！！建议： 一般情况下，轮播图的大小样式，自动播放等均可修改，建议网页区域设计完成后，将需要的轮播图样式放进对应的区域内，省时省事。
使用swiper, swiperSlide切换
Aa12364567的博客
11-10 894
【代码】使用swiper, swiperSlide切换。
swiper-轮播图使用教程
qq_54054566的博客
04-08 5354
Swiper 使用方法 1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"> </head&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值