Home > Article > Web Front-end > How to implement switching arrow buttons in swiper plug-in

How to implement switching arrow buttons in swiper plug-in

亚连Original: 2018-06-14 16:52:082730browse

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>

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>

js:

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

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!

php css html 闭包 JS 事件选择器微信小程序

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement side sliding menu effect in vue+swiperNext article：How to implement side sliding menu effect in vue+swiper

See more

How to implement switching arrow buttons in swiper plug-in

Related articles