swiper將箭頭移動到輪播圖外面

阿新 • • 發佈：2020-09-18

寫頁面時碰到設計圖中的輪播圖箭頭在外面的情況，於是自己寫了下。

--------------------------------------------------------

另外，左右箭頭自帶left值，right值，清除後則居中。清除程式碼：

.swiper-button-prev{ left:0!important; } .swiper-button-next{ right:0!important; } -----------------------------------

效果如下：

程式碼如下：

html+預設js：

<div class="box">
      <!-- 
 Swiper -->
  <div class="swiper-container" style="width: 1195px;">
      <!-- Add Arrows -->
    <div style="position: absolute;top: 0;left: 0; height: 100%;width: 45px;"><div class="swiper-button-prev"></div></div>
        <div class="swiper-wrapper box1">
            < 
div class="swiper-slide box2">Slide 1</div>
            <div class="swiper-slide box2">Slide 2</div>
            <div class="swiper-slide box2">Slide 3</div>
            <div class="swiper-slide box2">Slide 4</div>
            <div class="swiper-slide box2" 
>Slide 5</div>
            <div class="swiper-slide box2">Slide 6</div>
            <div class="swiper-slide box2">Slide 7</div>
            <div class="swiper-slide box2">Slide 8</div>
            <div class="swiper-slide box2">Slide 9</div>
            <div class="swiper-slide box2">Slide 10</div>
        </div>
    <!-- Add Arrows -->
    <div><div class="swiper-button-next" style="position: absolute;top: 0;right: 0; height: 100%;width: 45px;"></div></div>  
  </div>
</div>

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

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 25,
      slidesPerGroup: 4,
      loop: true,
      loopFillGroupWithBlank: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

css：

    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-container {
      width: 100%;
      height: 100%;
      position: static;
    }

    .swiper-slide {
      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-button-next, .swiper-button-prev{
        color: #666;
    }
    .swiper-button-next:hover{
        color: #0ba95f;
    }
    .swiper-button-prev:hover{
        color: #0ba95f;
    }
    /* ↑ 以上為swiper demo預設樣式 */
    .box{
        width: 1285px;
        height: 262px;
        position: relative;
        background-color:#FFF;
        margin:150px auto 0;
    }
    .box1{
        box-sizing: content-box!important;
    }
    .box2{
        width: 280px!important;
        background-color: pink;
    }