How to implement switching arrow buttons in swiper plug-in-JS Tutorial-php.cn

How to implement switching arrow buttons in swiper plug-in

亚连

Release： 2018-06-14 16:52:08

Original

2756 people have browsed it

This article mainly introduces the custom switching arrow button of the swiper plug-in in detail, which has a certain reference value. Interested friends can refer to it

I don’t know if you have any when using swiper. Encountering such a need, the swiper plug-in customizes the switching arrow button. Without further ado, let’s go directly to the gif.

That is, you need to move the left and right switching arrow outside the container and customize the arrow style.
Add a parent container to the swiper container, leaving a gap between the two containers, and it will be ok if the arrow is positioned between the gaps.
The arrow is absolutely positioned by default. If you give the parent container a relative position, you can adjust the arrow position. In addition, the arrow uses a background image. When changing the size of the arrow, remember to change the size of the background image. Up the code.

css:

<style>
    .out_container{
      width: 280px;
      height: 150px;
      margin: 100px auto;
      position: relative;
      outline: 1px solid black;
    }
    .in_container{
      width: 216px;
      height: 130px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper_btn{
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>

Copy after login

html:

<body>
  <p class="out_container">
    <p class="in_container">
      <p class="swiper-wrapper">
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
      </p>
      <p class="swiper-button-prev swiper_btn"></p>
      <p class="swiper-button-next swiper_btn"></p>
    </p>
  </p>
</body>

Copy after login

js:

<script>
  var mySwiper = new Swiper(&#39;.in_container&#39;, {
    prevButton: &#39;.swiper-button-prev&#39;,
    nextButton: &#39;.swiper-button-next&#39;,
  })
</script>

Copy after login

The effect is as follows

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use three-level linkage selectors in WeChat mini programs

PHP closures and anonymous functions (details Tutorial)

About custom events in Vue components (detailed tutorial)

The above is the detailed content of How to implement switching arrow buttons in swiper plug-in. For more information, please follow other related articles on the PHP Chinese website!