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

How to switch arrow buttons in swiper plug-in

php中世界最好的语言Original: 2018-04-13 13:39:202970browse

This time I will show you how to switch the arrow buttons with the swiper plug-in. What are the precautions for switching the arrow buttons with the swiper plug-in? The following is a practical case, let's take a look.

That is to say, 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. You can adjust the arrow position by giving the parent container a relative positioning. 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('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to switch arrow buttons in swiper plug-in

Related articles