关于 SwiperJS 的初次使用

最新推荐文章于 2025-03-11 13:40:50 发布

俊小赞

最新推荐文章于 2025-03-11 13:40:50 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44808483/article/details/113126169

版权

Swiper 专栏收录该内容

6 篇文章

订阅专栏

本文介绍SwiperJS插件的使用方法，包括初始化步骤及常见参数设置，如滑动方向、时间等，帮助快速实现网站轮播图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

如今，轮播图已经是每一个网站都会配备，其有着高效展现效率，本文将会介绍 Swiper 这个插件，讲解初始化步骤以及常见的参数。

一、swiper

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。通过它可以快速地制作轮播图、h5等许多功能展现。

二、初始化

1.使用swiper文件或者cdn加载

使用 swiperJS 需要同时引入 swiper.css 和 swiper.js 两个文件。本文主要是通过cdn加载的方式，并且考虑到浏览器的兼容性，使用v4.5.1。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SwiperJS</title>
    <!-- 引入相关的 css 文件 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
  </head>
  <body>
    ...
  </body>
  <!-- 引入相关的 js 文件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
</html>

2.页面结构

HTML

<div 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>
<!-- 导航等组件可以放在container之外 -->

JS初始化

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical', // 垂直切换选项
  loop: true, // 循环模式选项

  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // 如果需要滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Dome案例

<!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-container {
        width: 100vw;
        height: 100vh;
      }
      div.swiper-slide {
        width: 100%;
        height: 100%;
        color: #ffffff;
      }
      div.swiper-slide:nth-child(1) {
        background-color: #16a085;
      }
      div.swiper-slide:nth-child(2) {
        background-color: #2980b9;
      }
      div.swiper-slide:nth-child(3) {
        background-color: #f1c40f;
      }
    </style>
  </head>
  <body>
    <div 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>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  </script>
</html>