使用Swiper实现轮播图无缝衔接-图片版

原创于 2025-02-17 18:05:59 发布 · 207 阅读
CC 4.0 BY-SA版权
文章标签：
代码：

<!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; */
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-right: 0.5rem;
      }

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

      .banner_video_box-pc {
        display: none;
      }

      /* 指示灯样式 */
      .swiper-pagination {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 10;
      }

      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #fff;
        opacity: 0.5;
        border-radius: 50%;
        cursor: pointer;
        transition: opacity 0.3s ease, background 0.3s ease;
      }

      .swiper-pagination-bullet-active {
        opacity: 1;
        background: #007aff;
      }

      .swiper-pagination {
        left: 50% !important;
      }
    </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="https://cdn.shopify.com/s/files/1/0444/1256/7702/files/Barbell_Bench_Press_Grip_Width.webp?v=1739525563"
                  alt="Free Shipping on ALL Orders*"
                  width="1200"
                  height="1200"
                />
              </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="https://cdn.shopify.com/s/files/1/0444/1256/7702/files/Flybird_FB149_Flat_Incline_Decline_Weight_Bench_02856362-b4ec-453e-9f23-b14420e31a90.webp?v=1739445129"
                  alt="Discover our BEST SELLERS*"
                  width="1200"
                  height="1200"
                />
              </p></a
            >
          </div>
          <div
            class="c-announcement__slide swiper-slide swiper-slide-active"
            data-swiper-slide-index="3"
          >
            <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="https://cdn.shopify.com/s/files/1/0444/1256/7702/files/dumbbell_bench_press.jpg?v=1739168710"
                  alt="NEW - Folding Benches with Preacher Curl "
                  width="1200"
                  height="1200"
                />
              </p></a
            >
          </div>
          <div
            class="c-announcement__slide swiper-slide swiper-slide-active"
            data-swiper-slide-index="4"
          >
            <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="https://cdn.shopify.com/s/files/1/0444/1256/7702/files/pc_flybird_squak_rack_for_home_gym_-3.webp?v=1737105055"
                  alt="NEW - Folding Benches with Preacher Curl "
                  width="1200"
                  height="1200"
                />
              </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="https://cdn.shopify.com/s/files/1/0444/1256/7702/files/Sit_Ups_On_Bench.webp?v=1739444394"
                  alt="NEW - Folding Benches with Preacher Curl "
                  width="1200"
                  height="1200"
                />
              </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 class="swiper-pagination"></div>
      </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, // 用户交互后不停止自动播放
          //   },
          pagination: {
            el: ".swiper-pagination", // 指示灯容器
            clickable: true, // 允许点击指示灯切换图片
          },
        });

        // 获取前后按钮
        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>