swiper的使用

已于 2025-04-22 17:07:13 修改
阅读量419 收藏 5
点赞数 3
分类专栏： HTML+CSS 文章标签： html css
于 2025-04-07 14:00:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h3169929477/article/details/147042340
版权

文章目录

什么是swiper

  • Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
  • Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
  • Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

了解详情请查看swiper官网

下面是使用代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在 head 中引入 Swiper CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@11.0.5/swiper-bundle.min.css">

  <!-- 在 body 末尾引入 Swiper JS -->
  <script src="https://unpkg.com/swiper@11.0.5/swiper-bundle.min.js"></script>

  <style>
    /* 容器基础样式 */
    .swiper {
      width: 100%;
      height: 400px;
    }

    .swiper-button-prev,
    .swiper-button-next {
      background-color: #000 !important;
      /* 黑色背景 */
      border-radius: 50% !important;
      /* 圆形效果 */
      width: 40px !important;
      /* 按钮尺寸 */
      height: 40px !important;
      transition: 0.3s;
      /* 过渡动画 */
    }

    /* 修改箭头颜色为白色 */
    .swiper-button-prev::after,
    .swiper-button-next::after {
      color: #fff !important;
      /* 白色箭头 */
      font-size: 20px !important;
      /* 调整箭头大小 */
    }

    /* 悬停效果 */
    .swiper-button-prev:hover,
    .swiper-button-next:hover {
      background-color: #333 !important;
    }
  </style>
</head>

<body>
  <!-- 轮播图容器 -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <!-- 轮播项（图片可替换为任意内容） -->
      <div class="swiper-slide"><img src="../day15/assets/carousel1.png" alt=""></div>
      <div class="swiper-slide"><img src="../day15/assets/carousel2.png" alt=""></div>
      <div class="swiper-slide"><img src="../day15/assets/carousel3.png" alt=""></div>
    </div>

    <!-- 导航按钮（可选） -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 分页器（可选） -->
    <div class="swiper-pagination"></div>
  </div>


  <script>
    const swiper = new Swiper('.swiper', {
      // 核心配置
      loop: true,             // 无缝循环 [6,7](@ref)
      speed: 3000,             // 切换动画时长（单位ms）

      autoplay: {
        delay: 3000,        // 自动播放间隔（单位ms）
        disableOnInteraction: false // 用户操作后仍自动播放
      },

      // 分页器配置
      pagination: {
        el: '.swiper-pagination',
        clickable: true     // 分页器可点击切换
      },

      // 导航按钮配置
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
    });
  </script>
</body>

</html>

对于底部分页的修改

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>官方爆料</title>
  <link rel="stylesheet" href="../../css/announce/announce.css">
  <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
</head>
<style>
// 轮播图分页器
.swiper-pagination{
	/* 把绝对定位改为相对定位 这样就会贴着上面的轮播图 显示分页器 */
	position: relative;
	margin: 0;
	height: 13px;
	width: 100%;
	margin-bottom: 22px;
	.swiper-pagination-bullet{
	  	background-color: #931919;
	  	/* 这个不透明度必须加 这样你的轮播图才可实现分页器不选中的颜色是什么 */
	  	opacity: 1;
	  	margin:0 5px; 
	  	height: 1px;
	  	width: 27px;
	  	/* 去除圆角变成条形 */
	  	border-radius: 0;
	}
	.swiper-pagination-bullet-active{
		/* 修改激活颜色*/
	  	background-color: #c39b5e;
	}
}
</style>

<body>
  
  <!-- 轮播图 -->
  <div class="banner">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
        	<img src="../../assets/announce/carousel/1.jpg" />
        </div>
        <div class="swiper-slide">
        	<img src="../../assets/announce/carousel/2.webp" />
        </div>
        <div class="swiper-slide">
        	<img src="../../assets/announce/carousel/3.webp" />
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <script src="../../node_modules/swiper/swiper-bundle.min.js"></script>
  <script>
    const swiper = new Swiper('.swiper', {
      // 核心配置
      loop: true,             // 无缝循环 [6,7](@ref)
      speed: 3000,             // 切换动画时长（单位ms）

      autoplay: {
        delay: 3000,        // 自动播放间隔（单位ms）
        disableOnInteraction: false // 用户操作后仍自动播放
      },

      // 分页器配置
      pagination: {
        el: '.swiper-pagination',
        clickable: true     // 分页器可点击切换
      },

      // 导航按钮配置
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
    });
  </script>
</body>

</html>

仿无畏契约

可以参考我的源码
gitee仓库源码无畏契约
使用版本swiper11
目录如下
在这里插入图片描述
图片可用其他图片替换

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .bg3 {
      background: url(./imgs/bg.webp) no-repeat;
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .contain {
      position: absolute;
      background: url(./imgs/weapon-bg.png) no-repeat 0 center /contain;
      height: 600px;
      width: 1250px;
      font-size: 14px;
      /* color: #000; */
      left: 150px;
      top: 60px;
      margin: 0;
      padding: 0;
      /* background: #000; */
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* background: #fff; */
      background: #ece8e1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }



    .swiper-slide {
      background-size: cover;
      background-position: center;
    }

    /* .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    } 
      */
    /* 显示 */
    .mySwiper2 {
      height: 80%;
      width: 70%;
      position: absolute;
      left: 0;
      top: 0;

    }

    .mySwiper2 .swiper-slide {
      position: relative;
      background: transparent;
    }
    .mySwiper2 .swiper-slide  .mask{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
    }


    /* .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    } 
      */
    /* 底部 */
    .mySwiper {
      /* height: 20%; */
      height: 600px;
      width: 300px;
      box-sizing: border-box;
      padding: 10px 0;
      /*  */
      position: absolute;
      right: 0;
      top: 0;
      background: transparent;
    }

    /* .mySwiper .swiper-wrapper{
      display: flex;
      flex-direction: column;
    } */

    /* 底部 */
    .mySwiper .swiper-slide {
      width: 100%;
      height: 100%;
      /* opacity: 0.4; */
    }

    .mySwiper .swiper-slide span {
      position: absolute;
      display: inline-block;
      left: 6px;
      bottom: 6px;
      font-size: 13px;
    }

    /* 底部 */
    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

    /* 所有 */
    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* background: ; */
    }
  </style>
</head>

<body>
  <div class="bg3">
    <div class="contain">
      <!-- Swiper -->
      <div style="--swiper-navigation-color: #802727; --swiper-pagination-color: #fff" class="swiper mySwiper2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/1.webp" />
            <div class="mask">了解更多</div>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/2.webp" />
            <div class="mask">了解更多</div>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/3.webp" />
            <div class="mask">了解更多</div>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/4.webp" />
            <div class="mask">了解更多</div>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/5.webp" />
            <div class="mask">了解更多</div>
          </div>
        </div>
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
      </div>
      <!-- 底部 -->
      <div thumbsSlider="" class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./imgs/1.webp" />
            <span>短炮</span>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/2.webp" />
            <span>短炮</span>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/3.webp" />
            <span>短炮</span>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/4.webp" />
            <span>短炮</span>
          </div>
          <div class="swiper-slide">
            <img src="./imgs/5.webp" />
            <span>短炮</span>
          </div>
        </div>
      </div>
    </div>
  </div>



  <!-- Swiper JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    // 底部
    var swiper = new Swiper(".mySwiper", {

      direction: 'vertical',
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
      on: {
        // 点击事件添加背景
        click: function (swiper, event) {
          // alert('事件触发了;');
          var slides = swiper.slides;
          slides.forEach(function (slide) {
            slide.style.background = '';
          });
          var clickedSlide = event.target.closest('.swiper-slide');
          if (clickedSlide) {
            clickedSlide.style.background = "url(./imgs/select.webp)";
          }
        },
        slideChange: function () {

        }

      },
    });

    // 初始化，刚刚进入页面，默认显示第一张图片
    if (swiper.slides.length > 0) {
      swiper.slides[0].style.backgroundImage = "url(./imgs/select.webp)";
    }

    // 上部
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      // 垂直
      direction: 'vertical',
      effect: "fade",
      // 淡入淡出效果的配置选项，不要覆盖
      fadeEffect: {
        crossFade: true, // 启用交叉淡入淡出效果
      },

      // navigation: {
      //   nextEl: ".swiper-button-next",
      //   prevEl: ".swiper-button-prev",
      // },
      // 不允许触碰翻页
      allowTouchMove: false,
      thumbs: {
        swiper: swiper,
      },
    });
  </script>
</body>

</html>
Swiper
visibleforest的博客
09-26 2771
Swiper是什么：swiper是开源、免费、强大的触摸滑动插件。在移动端和PC端。 swiper可以做什么：实现移动端和PC端的大部分滑动功能。如幻灯片、Tab选项卡、页面滑动切换 Swiper使用方法：参考官网的使用教程Swiper使用方法 - Swiper中文网 版本升级怎么办：一切以官网为准，同样参考官网的教程。 各种版本下载地址：https://github.com/nolimits4web/swiper Swiper的常用API 1.swiper初始化： 用于初始化一个Swipe.
关于swiper使用心得
You_vane的博客
08-27 982
这段时间一直在用swiper,已下是我的使用心得： 1：使用版本建议： 我目前使用的是Swiper3.4.2 ,在一个不高不低的版本。 主要还是因为该版本网上问题大部分都是以3左右的问题解决的，若高版本用低版本的会有些问题，例如autoplay的修改就能比较出差异，一个直接给值就行，另外一个版本还得在对象里修改。 2：使用swiper 如何兼容IE： 较高版本swiper不兼容IE，但低版本兼容，所以判断下就好了， 即低版本用版本2 高版本用版本3 所以除了正常使用的时候还需要加上如下..
swiper插件在vscode的html文件中使用教程
weixin_47700705的博客
07-03 475
3.之后选择下载swiper版本，选择任一版本下载即可，推荐下载swiper7以后的版本，因为7以前的版本和7以前的版本swiper有些API选项不一样。一般下载最新版的就可以了。5.找到swiper.min.css和swiper.min.js，将文件复制到vscode项目文件即可。2.将鼠标移动到获取swiper菜单上，之后点击下载swiper选项。9.写完上述代码后，运行网页，能用鼠标上下切换着说明可以了。4.解压下载好的swiper。8.编写swiper模板代码。7.导入swiper文件。
10 分钟搞定 Swiper 轮播图：轻松打造高颜值网页
最新发布
~~~
02-28 1686
本文详细介绍了如何使用 Swiper 实现功能丰富的轮播图，涵盖了从基础使用到常用配置的全面指南。Swiper 是一款免费开源的轮播图库，支持水平、垂直、3D 翻转等多种效果，广泛应用于网页设计中。文章通过代码示例逐步讲解了如何初始化 Swiper、配置分页器、导航按钮、自动播放等功能，并提供了封装复用的方法，帮助开发者快速实现个性化的轮播图效果。此外，还介绍了响应式布局、动态幻灯片等高级配置，适合初学者和高级开发者参考。无论是简单的图片轮播还是复杂的交互需求，Swiper 都能轻松应对。
swiper
些许就好丶的博客
07-26 580
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQ
html中swiper组件的使用
wqww_1的博客
03-12 3681
静态的 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.1/swiper-bundle.css" rel="stylesheet"> --> <!-- <script sr
前端swiper在html和vue项目中两种使用方法(带源码)
m0_49714202的博客
06-08 2367
前端swiper在html和vue项目中分别使用,有解析,带源码~
微信小程序swiper使用网络图片不显示问题解决
10-15
以下是一个简单的Swiper使用示例： ```xml <swiper autoplay="true" interval="3000" duration="1000"> *this"> <swiper-item> <image src="{{item}}" width="355" height="150"></image> </swiper-item> ...
移动端触摸滑动插件swiper使用方法详解
08-29
移动端触摸滑动插件Swiper使用方法详解 Swiper是一款强大的移动端触摸滑动插件，能够帮助开发者快速实现移动端滑动效果。下面我们将详细介绍Swiper的使用方法，并提供一些常用的配置选项。 Swiper的基本使用 首先...
Swiper-Hash-Navigation:Swiper 的哈希导航插件
06-25
此插件不再维护，因为此功能已在 Swiper 3 核心中。 Swiper-Hash-Navigation Swiper 的哈希导航插件 Hash Navigation 插件为您的 swiper 幻灯片添加了 hash url 导航。 演示和使用 笔记 提供 UMD 和非 UMD 版本。...
移动端swiper使用
12-06
在移动端开发中，swiper是一种常用的组件，用于实现轮播图、手势滑动等功能。swiper提供了丰富的API和配置选项，使得开发者可以轻松实现各种滑动效果和交互。 以下是使用swiper的基本步骤： 1. **引入swiper的CSS和JS文件**： 首先，需要在HTML文件中引入swiper的CSS和JS文件。可以通过CDN引入，也可以下载到本地引入。 ```html <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> ``` 2. **创建HTML结构**： 创建一个swiper容器，并添加swiper-wrapper和swiper-slide等结构。 ```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> ``` 3. **初始化swiper**： 在JavaScript中初始化swiper，并配置相关参数。 ```javascript var mySwiper = new Swiper('.swiper-container', { loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); ``` 4. **自定义样式**： 根据需要自定义swiper的样式，以适应不同的设计需求。 ```css .swiper-container { width: 100%; height: 300px; } .swiper-slide { display: flex; align-items: center; justify-content: center; background: #ccc; font-size: 24px; } ``` 通过以上步骤，你就可以在移动端项目中实现一个基本的swiper轮播图。根据具体需求，你可以进一步配置swiper的选项，如自动播放、滑动速度、效果切换等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值