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

How to switch arrow buttons in swiper plug-in

php中世界最好的语言

Release： 2018-04-13 13:39:20

Original

2961 people have browsed it

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>

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('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>

Copy after login

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!