使用Swiper组件实现轮播图的无缝衔接，且为左进右出/右进左出的效果

已于 2025-02-17 17:24:26 修改
阅读量441 收藏 4
点赞数 10
文章标签： css css3 html
于 2025-02-17 17:24:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_72684019/article/details/145687516
版权

效果：

代码说明：

  1. Swiper初始化：

    • loop: true：使轮播图可以循环播放。

    • navigation：指定前后按钮的元素。

    • autoplay：设置自动播放的延迟时间和用户交互后的行为。

  2. 事件监听：

    • 为前后按钮添加点击事件监听器，点击时分别调用 swiper.slidePrev() 和 swiper.slideNext() 来切换幻灯片。

注意事项：

  • 确保你已经引入了Swiper库的CSS和JS文件。如果没有引入，你需要在HTML文件中添加以下代码：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  • 如果你使用的是Swiper的最新版本（如Swiper 8或更高版本），可能需要根据官方文档调整初始化代码。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用Swiper组建实现轮播图</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <style>
        button.c-announcement__btnPrev.u-hideDesktop,
        button.c-announcement__btnNext.u-hideDesktop {
          z-index: 2;
          position: absolute;
          top: 50%;
          transform:  translateY(-50%);
          background: #000;
          color: #fff;
          border: 0;
          transform-origin: top;
          width: 30px;
          height: 100%;
        }

        button.c-announcement__btnPrev.u-hideDesktop
          svg.icon.icon-caret.c-iconCaret {
          transform: rotate(90deg);
        }

        button.c-announcement__btnNext.u-hideDesktop
          svg.icon.icon-caret.c-iconCaret {
          transform: rotate(270deg);
        }

        button.c-announcement__btnPrev.u-hideDesktop {
          left: 0;
        }

        button.c-announcement__btnNext.u-hideDesktop {
          right: 0;
        }

        announcement-component .swiper-slide {
          text-align: center;
          background: #000;
        }

        announcement-component .swiper {
          background: #000;
          padding: 5px 0;
        }

        p.c-announcement__message.c-b3 {
          padding: 0;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          text-decoration: auto;
          font-size: 12px;
          font-weight: bolder;
        }

        announcement-component .swiper-slide img {
          display: block;
          width: 20px;
          height: auto;
          object-fit: cover;
          margin-right: 0.5rem;
        }

        a.c-announcement__link.link {
          text-decoration: unset;
        }

        .banner_video_box-pc {
          display: none;
        }

    </style>
  </head>
  <body>
    <announcement-component>
      <div
        class="c-announcement__slider swiper swiper-initialized swiper-horizontal swiper-backface-hidden"
        data-announcement-slider=""
      >
        <button class="c-announcement__btnPrev u-hideDesktop" data-btn-prev="">
          <svg
            class="icon icon-caret c-iconCaret"
            aria-hidden="true"
            focusable="false"
            viewBox="0 0 10 6"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z"
              fill="currentColor"
            ></path>
          </svg>
        </button>
        <div class="c-announcement__wrapper swiper-wrapper">
          <div
            class="c-announcement__slide swiper-slide swiper-slide-next"
            data-swiper-slide-index="1"
          >
            <a
              href="#"
              class="c-announcement__link link"
              title="Call 888-410-1503 x2 Mon-Fri 7am-6pm CT &amp; Saturday 8am-3pm CT"
              ><p
                class="c-announcement__message c-b3"
                title="Call 888-410-1503 x2 Mon-Fri 7am-6pm CT &amp; Saturday 8am-3pm CT"
              >
                <img
                  loading="eager"
                  src="//titan.fitness/cdn/shop/files/next-day-SML_a9e189fd-91b7-4496-8283-dd04f7c44d2f.png?v=1717535688"
                  alt="哈哈哈哈哈哈哈哈"
                  width="25"
                  height="25"
                />
                <span>哈哈哈哈哈哈哈哈</span>
              </p></a
            >
          </div>
          <div
            class="c-announcement__slide swiper-slide swiper-slide-prev"
            data-swiper-slide-index="2"
          >
            <a
              href="#"
              class="c-announcement__link link"
              title="Splitpay or financing with 0% APR* available"
              ><p
                class="c-announcement__message c-b3"
                title="Splitpay or financing with 0% APR* available"
              >
                <img
                  loading="eager"
                  src="//titan.fitness/cdn/shop/files/wallet-white.png?v=1711969245"
                  alt="钱钱钱钱钱钱钱钱"
                  width="25"
                  height="25"
                />
                <span>钱钱钱钱钱钱钱钱</span>
              </p></a
            >
          </div>
          <div
            class="c-announcement__slide swiper-slide swiper-slide-active"
            data-swiper-slide-index="0"
          >
            <a
              href="https://flybirdfitness.com/products/weight-benches-with-leg-preacher-curl"
              class="c-announcement__link link"
              title="Expedited shipping options available for a fee"
              ><p
                class="c-announcement__message c-b3"
                title="Expedited shipping options available for a fee"
              >
                <img
                  loading="eager"
                  src="//titan.fitness/cdn/shop/files/truck.png?v=1698321187"
                  alt="啦啦啦啦啦啦啦啦啦"
                  width="25"
                  height="25"
                />
                <span>啦啦啦啦啦啦啦啦啦</span>
              </p></a
            >
          </div>
        </div>
        <button class="c-announcement__btnNext u-hideDesktop" data-btn-next="">
          <svg
            class="icon icon-caret c-iconCaret"
            aria-hidden="true"
            focusable="false"
            viewBox="0 0 10 6"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z"
              fill="currentColor"
            ></path>
          </svg>
        </button>
      </div>
    </announcement-component>

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

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 初始化Swiper
        const swiper = new Swiper(".c-announcement__slider", {
          loop: true, // 循环播放
          navigation: {
            nextEl: "[data-btn-next]", // 下一个按钮
            prevEl: "[data-btn-prev]", // 上一个按钮
          },
          //   autoplay: {
          //     delay: 3000, // 自动播放延迟时间
          //     disableOnInteraction: false, // 用户交互后不停止自动播放
          //   },
        });

        // 获取前后按钮
        const btnPrev = document.querySelector("[data-btn-prev]");
        const btnNext = document.querySelector("[data-btn-next]");

        // 添加点击事件监听器
        btnPrev.addEventListener("click", () => {
          swiper.slidePrev(); // 切换到上一个幻灯片
        });

        btnNext.addEventListener("click", () => {
          swiper.slideNext(); // 切换到下一个幻灯片
        });
      });
    </script>
  </body>
</html>

微信小程序 - 详细实现各种样式 swiper 轮播图组件大全，适用于各种场景和样式要求的轮播图，支持竖向卡片轮播图类型、横向侧滑(左右两侧的图片能看到一点边角)类型、无缝滚动衔接、带左右箭头手动切换
王二红
08-08 3031
微信小程序，wechat，vue.js，轮播图，swiper，swiper轮播图，微信小程序实现竖向卡片式的轮播图，如何做无缝滚动衔接的轮播图，轮播图类型，轮播图大全，各种常见轮播图示例源码，源代码，可直接复制，比例轮播图，个性轮播图，实现基于swiper 常见轮播图轮子大全，vue竖立轮播图，垂直轮播图，实现图片竖直方向的轮播，vue 垂直滚动轮播图，图片立体轮播，2D轮播图，3D轮播图，左右露出一点图片的轮播图，如何使用swiper制作露边轮播图，中间大两边小的轮播图效果，重叠轮播，swiper倾斜图片
vue中使用swiper实现上下切换无缝轮播图pc端简单自动轮播效果
qq_28170105的博客
07-14 3441
代码】vue中使用swiper实现上下切换无缝轮播图pc端简单自动轮播效果。
swiper自动无缝轮播（无限滚动）
qq_42400124的博客
01-04 6314
swiper匀速无缝轮播（基于swiper的无缝滚动）
Swiper轮播图
QB哥欢迎您
05-13 707
介绍在Swiper轮播图使用
swiper实现匀速无缝轮播
Bright2017的博客
10-26 5012
var swiper = new Swiper('.swiper-container', { speed: 5000, //匀速时间 loop: true, autoplay: { delay: 0, stopOnLastSlide: false, disableOnInteraction: false, }, }); .swiper-container .swiper-wrapper{ -webkit-transition-timing-function: linear;.
无缝滚动的swiper
weixin_42581036的博客
06-14 960
【代码】无缝滚动的swiper。
JS常用插件 Swiper插件 实现轮播图
christmassss的博客
01-15 3171
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架中文官网地址:点击查看Swiper演示，里面的功能和样式十分丰富，根据自己的需求选择确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码。
swiper轮播图
weixin_43517869的博客
10-11 462
准备工具: swiper.min.css animate.min.css swiper.min.js swiper.animate.min.js app.js jquery.js 写法： 1）引入css文件和js文件 例： 2）在body里添加代码 例： div 中的图片可随意定义 3）给下标点 左点 右点设置样式： 例： 4）添加js代...
微信小程序使用swiper组件实现类3D轮播图
10-18
通过使用微信小程序自带的swiper组件，开发者可以轻松实现包含3D效果的轮播图，而无需依赖复杂的CSS3D或WebGL技术。 ### Swiper组件基础属性介绍 - **indicator-dots**: 这个属性用于控制是否显示小圆点指示器。在...
微信小程序实现Swiper轮播图效果
12-13
- `circular`：设置为`true`表示轮播图会无缝衔接，即从最后一张切换到第一张时平滑过渡。 2. **逻辑层（mine.js）**： - 使用`Page`对象来定义页面的生命周期函数和数据。`data`属性中定义了Swiper组件所需的...
基于swiper轮播图
09-19
该轮播图一屏显示三张图片，中间图片放大，两边图片缩小效果。基于swiper的完美轮播图，提供给大家参考！效果图参考：https://blog.youkuaiyun.com/qq_20757489/article/details/101024851
Swiper 强悍的轮播图插件
02-20
Swiper 强悍的轮播图插件
swiper 轮播图
weixin_42286434的博客
07-20 482
通过npm安装：npm install react-native-swiper --save import React, {Component} from 'react' import { StyleSheet, Text, View, Image, Dimensions } from 'react-native' import Swiper from ...
使用swiper实现轮播图
m0_62676426的博客
10-07 3481
在使用swiper之前需要先引入需要的css和js文件，可以直接下载文件也可以选择使用CDN。在本文中我选择CDN的方式，首先在html文件中导入css和js。到这一步，一个简单的轮播图就完成了。创建div，放入需要轮播的内容。
用Swiper实现轮播图
qq_45823118的博客
03-18 2147
用Swiper实现轮播图任务描述相关知识搭建Swiper环境代码文件 任务描述 本关任务：用Swiper实现一个轮播图。 相关知识 为了完成本关任务，你需要掌握： Swiper基本的HTML结构， 基本功能的实现。 搭建Swiper环境 1.下载插件 进入Swiper官网 http://www.swiper.com.cn/download/index.html，只需要下载swiper-4.2.2.min.js和swiper-4.2.2.min.css就可以了。 2.引入插件 <!DOCTYPE h
Swiper实现轮播图
月下lk山人的博客
04-15 307
以react为例，c组件写法如下 1、初始化轮播方法 具体参数详情见：https://www.xiaoshu168.com/jquery/103.html initSwiper = () => { // 定义轮播 this.mySwiper = new Swiper(this.swiperRef.current, { loop: true, // 形成环路，即从最后一页跳转到第一页 speed: 1000, // 页面切换间隔 autoplay: { /
使用 swiper 做轮播图
17 的博客
02-09 8554
虽然我是一个喜欢造轮子的人，但是对于 swiper，我还是直接拿过来用了，功能很多，也很方便。本文介绍一些常用的功能。
【Swiper】轮播图 笔记
最新发布
karshey的博客
07-09 1264
网络请求得到数据，原本使用循环渲染每一个slide，即3个。但是，这样会使得loop失效：使用loop的话（loop:true）要请求完图片才知道有多少个slide，会导致：一进页面不能立即显示轮播图。需求是：一共三张图，来回切，保持循环（1，2，3->2，3，1->3，1，2->1，2，3）.虽然会显示循环，但是效果不好，在循环的图active（选中居中）之前，它是没有图片渲染出来的。，循3 才会显示出图片，但是此时循2没有显示出图片。的 循3 是空的，要把 循3 滑到中间，即。是选中居中的前一个的类，
Swiper 插件实现轮播图
m0_62508027的博客
05-14 2967
使用swiper实现轮播图效果
微信小程序：详解Swiper轮播图实现与配置
5. `circular`：如果设为`true`，轮播图将采用衔接滑动，也就是说最后一张图会与第一张图无缝连接，形成循环播放的效果。 除了基础配置，文章还提到了一个名为`slider`的自定义配置，用于添加链接和额外的图片信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小奋斗♛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值