Swiper 实现指定的 slide 显示位置

最新推荐文章于 2025-04-17 14:03:50 发布

俊小赞

最新推荐文章于 2025-04-17 14:03:50 发布

阅读量7.1k

点赞数 5

分类专栏： # Swiper 文章标签： swipe

本文链接：https://blog.youkuaiyun.com/weixin_44808483/article/details/115069266

版权

Swiper 专栏收录该内容

6 篇文章

订阅专栏

文章目录

前言
一、hashNavigation
二、slideTo
总结

前言

在日常的 Swiper.js 开发当中，我们难免需要实现：当某个按钮的点击，然后显示相对应的 slide 模块，类似分页器的。本文将会从Swiper的内置参数hashNavigation 与 slideTo() 方法，两种实现方式介绍。

一、hashNavigation

设置散列导航选项，或true使用默认值。为每个slide增加散列导航（有点像锚链接）。
还需要在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了，你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。

参数	描述
hashNavigation	锚导航（类型：boolean；默认：false；启用版本：4.0.0）
watchState	开启后观察浏览器窗口的的hashchange状态变化。可通过浏览器历史记录（页面前进后退按钮）或者URL的锚链接改变控制slide切换。（类型：boolean；默认：false；启用版本：4.0.0）
replaceState	使用replaceState（window.history.replaceState）代替hashnav的hash（document.location.hash）。（类型：boolean；默认：false；启用版本：4.0.0）
hashChange	事件函数：当浏览器的hash改变时执行。使用此功能需要开启Swiper 的hashNavigation - watchState功能。（启用版本：5.4.0）
hashSet	事件函数：当Swiper设置浏览器的hash值时执行。（启用版本：5.4.0）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SwiperJS hashNavigation</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
    <style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      div.swiper-button {
        margin: 10px 0;
      }

      div.swiper-container {
        width: 800px;
        height: 500px;
      }
      div.swiper-slide {
        width: 100%;
        height: 100%;
        color: #ffffff;
      }
      div.swiper-slide.slide1 {
        background-color: #16a085;
      }
      div.swiper-slide.slide2 {
        background-color: #2980b9;
      }
      div.swiper-slide.slide3 {
        background-color: #f1c40f;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-button">
        <a href="#slide1" target="_blank">slide1</a>
        <a href="#slide2" target="_blank">slide2</a>
        <a href="#slide3" target="_blank">slide3</a>
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide slide1" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide slide2" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide slide3" data-hash="slide3">Slide 3</div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      hashNavigation: true,
    });
  </script>
</html>

缺点：需要通过 a标签的target: _block，跳转到新页面才会显示需要展示的 slide，如果想通过 window.loaction.hash 改变地址栏实现显示的话是行不通的，hash 的确可以改变了地址栏，不过还是需要手动刷新页面才会显示正确。

二、slideTo

slideTo(number) 是 swiper 实例对象的一个方法，通过传进的数值。
根据点击的按钮传回的下标去展现 slide，其中起始的位置为0。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SwiperJS</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
    <style>
      body,
      div {
        margin: 0;
        padding: 0;
      }
      div.swiper-button {
        margin: 10px 0;
      }

      div.swiper-container {
        width: 800px;
        height: 500px;
      }
      div.swiper-slide {
        width: 100%;
        height: 100%;
        color: #ffffff;
      }
      div.swiper-slide.slide1 {
        background-color: #16a085;
      }
      div.swiper-slide.slide2 {
        background-color: #2980b9;
      }
      div.swiper-slide.slide3 {
        background-color: #f1c40f;
      }
    </style>
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-button">
        <button data-hash="1">slide1</button>
        <button data-hash="2">slide2</button>
        <button data-hash="3">slide3</button>
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide slide1">Slide 1</div>
        <div class="swiper-slide slide2">Slide 2</div>
        <div class="swiper-slide slide3">Slide 3</div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
  <script>
    // 创建 Swiper 的实例对象 mySwiper
    var mySwiper = new Swiper('.swiper-container', {});

    let buttons = document.querySelectorAll('.swiper-button button');
    for (const i of buttons) {
      i.addEventListener('click', function (e) {
        mySwiper.slideTo(i.getAttribute('data-hash') - 1);
      });
    }
  </script>
</html>