swiper6.0改造 “翻页按钮”：自定义style样式和position - 案例篇

最新推荐文章于 2024-07-02 22:14:33 发布

草巾冒小子

最新推荐文章于 2024-07-02 22:14:33 发布

阅读量1.1k

点赞数 1

分类专栏： swiper

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/113633697

版权

swiper 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文章目录

swiper6.0改造 “翻页按钮”：自定义style样式和position（含效果图、代码、使用手册）

swiper6.0改造 “翻页按钮”：自定义style样式和position（含效果图、代码、使用手册）

官当地址：代码演示地址

需求场景 · 描述如下：

功能：
1. 用户可以手动切换；
样式：
1. 含有左右切换按钮（且按钮显示在轮播图的两侧）；
2. 含有焦点图；

效果图 · gif 动画：

在这里插入图片描述

注意事项：

使用手册 · （注意事项）

swiper-container取消样式overflow;
具体参考样式和html注释

需要设置代码的几处位置：

全部代码 · 示下：

<!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="statics/plugin/swiper6.4.5/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
.swiper-div{width: 1200px;margin: 100px auto;}
.swiper-box{width: 1170px;margin:0 auto;border: red 1px solid;overflow: hidden;}/*隐藏溢出的轮播图，1170px根据图片间距和切换按钮的width宽度自定义计算何设置（此处不再赘述）*/
    .swiper-container {
      width: 1110px;/*轮播图显示区域。注意：因为不含切换按钮，*/
      height: 60px;/*轮播图区域高度设置*/
      overflow:visible;/*，所以：改为溢出可见，为了让溢出的切换按钮显示出来。*/
    }

    .swiper-slide {
      width: 140px;height: 60px;/*自定义轮播图img图片尺寸和高度，（具体参考demo浏览器审查的实际尺寸，不再赘述）*/
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    /*焦点和翻页按钮*/
    /*焦点图位置和样式（自行定义样式和具体位置）*/
   .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 0;}
   .swiper-pagination-bullet{background-color: #ef1f1f;opacity: 0.1;}
   .swiper-pagination-bullet-active{background-color: #ef1f1f;opacity: 0.8;}
   .swiper_btn{width: 25px;height: 60px;top: 0;background-color: rgba(220,20,60,.2);margin-top: 0;}/*区域内的红色透明层就是自定义切换按钮所在的定义区域（自行定义样式和具体位置，不再赘述代码）*/
   .swiper-button-next:after, .swiper-button-prev:after{display: none;}/*隐藏swiper自己的按钮，没必要修改源码*/
   .swiper-button-next{right: -30px;}/*定义切换按钮的位置*/
   .swiper-button-prev{left: -30px;}/*定义切换按钮的位置*/
  </style>
</head>

<body>
  <!-- Swiper -->
<section class="swiper-div"><!--页面定义的max-width居中区域-->
	<section class="swiper-box"><!--页面定义的轮播图(含切换按钮)的最大溢出width尺寸区域，设置为溢出隐藏，避免多余的轮播图显示-->
		<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 class="swiper-slide">Slide 4</div>
	      <div class="swiper-slide">Slide 5</div>
	      <div class="swiper-slide">Slide 6</div>
	      <div class="swiper-slide">Slide 7</div>
	      <div class="swiper-slide">Slide 8</div>
	      <div class="swiper-slide">Slide 9</div>
	      <div class="swiper-slide">Slide 10</div>
	      <div class="swiper-slide">Slide 11</div>
	      <div class="swiper-slide">Slide 12</div>
	      <div class="swiper-slide">Slide 13</div>
	      <div class="swiper-slide">Slide 14</div>
	      <div class="swiper-slide">Slide 15</div>
	      <div class="swiper-slide">Slide 16</div>
	      <div class="swiper-slide">Slide 17</div>
	      <div class="swiper-slide">Slide 18</div>
	      <div class="swiper-slide">Slide 19</div>
	      <div class="swiper-slide">Slide 20</div>
	    </div>
	    <!-- Add Pagination -->
	    <div class="swiper-pagination bottom0"></div>
	    <!-- Add Arrows -->
	    <!--此处自己定义样式的类名：swiper_btn->
	    <div class="swiper-button-next swiper_btn"></div>
	    <div class="swiper-button-prev swiper_btn"></div>
	  </div>
	</section>
	  
</section>

  <!-- Swiper JS -->
  <script src="statics/plugin/swiper6.4.5/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 7,
      spaceBetween: 20,
      slidesPerGroup: 7,
      loop: true,
      autoplay: {
		    delay: 3000,
		    stopOnLastSlide: false,
		    disableOnInteraction: true,
	    },
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>