原生开发 HTML页面引入swiper，纯轮播展示页面

zhuà!

已于 2023-02-06 16:17:42 修改

阅读量937

点赞数

文章标签： html javascript 前端

于 2023-01-06 15:53:15 首次发布

本文链接：https://blog.csdn.net/m0_51430102/article/details/128580194

版权

该文章提供了一个HTML示例，展示如何利用Swiper库创建一个轮播图，通过左右按钮切换图片，同时在底部隐藏滚动条。代码中包含了必要的CSS样式和JavaScript逻辑，以及SwiperCDN的引用。

摘要由CSDN通过智能技术生成

先看效果

在这里插入图片描述

左右两个按钮可以切换底部不显示滚动条

看代码(全部代码，可以直接复制)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        width: 100%;
        height: 100%;
      }
      .swiper {
        width: 100vw;
        height: 100vh;
      }
      img {
        width: 100vw;
        height: 100vh;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="http:/*****/tg/img/1.PNG"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="http:/*****/tg/img/1.PNG"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="http:/*****/tg/img/1.PNG"
            alt=""
          />
        </div>
      </div>
      // 切换按钮
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </body>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"></script>

  // js逻辑
  <script type="text/javascript">
    var mySwiper = new Swiper('.swiper', {
      // direction: 'vertical', // 垂直切换选项
      // loop: true, // 循环模式选项

      // pagination: {
      //   el: '.swiper-pagination',
      // },

      // autoplay:true,

      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // scrollbar: {
      //   el: '.swiper-scrollbar',
      // },
    });
  </script>
</html>