masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

在swiper插件中如何实现切换箭头按钮

亚连
Lepaskan： 2018-06-14 16:52:08
asal
2751 orang telah melayarinya

这篇文章主要为大家详细介绍了swiper插件自定义切换箭头按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

不知道大家在使用swiper时有没有遇到这样一种需求，swiper插件自定义切换箭头按钮，话不多说，直接上gif。

也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。
给swiper容器再加一个父容器，两个容器之间留下间隙，箭头定位到间隙之间就ok了。
箭头默认是绝对定位的，给父容器一个相对定位，就能够调整箭头位置。此外箭头用的是背景图，改变箭头大小的同时记得改变背景图大小。上代码。

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>
Salin selepas log masuk

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>
Salin selepas log masuk

js:

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

效果如下

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在微信小程序中如何使用三级联动选择器

PHP闭包和匿名函数（详细教程）

在Vue组件中有关自定义事件（详细教程）

Atas ialah kandungan terperinci 在swiper插件中如何实现切换箭头按钮. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
swiper切换箭头按钮 swiper箭头按钮 swiper按钮
sumber：php.cn
Artikel sebelumnya：在vue+swiper中如何实现侧滑菜单效果 Artikel seterusnya：如何使用swiper移动端轮播插件
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Mengapakah kotak pilihan saya masih tersekat dan tidak dapat kembali kepada nilai lalainya? Saya baru sahaja mencipta fungsi ini untuk menukar tajuk halaman selepas mengklik butang t...
daripada 2024-04-04 00:14:23
0
1
390
Pendengar acara tatal ditambahkan pada elemen tetapi hanya bergerak dengan betul jika scrollTop tidak sama dengan 0 Jadi saya menulis skrip kecil ini di mana saya mempunyai dua senarai - Tugasan Selesai/Akt...
daripada 2024-04-01 11:03:26
0
1
326
Buat papan tanda berskala menggunakan HTML, CSS dan SVG Saya ingin membuat butang dalam bentuk papan tanda (segi empat tepat dengan hujung). _____...
daripada 2024-03-31 14:45:14
0
1
294
Isu melihat CSS dan JS dalam Halaman GitHub, tetapi berfungsi dengan baik dalam Kod VS Saya sedang mengusahakan halaman untuk projek dan saya menggunakan templat yang mengandung...
daripada 2024-03-30 22:12:20
0
1
314
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan