masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > swiper插件怎样切换箭头按钮

swiper插件怎样切换箭头按钮

php中世界最好的语言
Lepaskan： 2018-04-13 13:39:20
asal
3014 orang telah melayarinya

这次给大家带来swiper插件怎样切换箭头按钮，swiper插件切换箭头按钮的注意事项有哪些，下面就是实战案例，一起来看一下。

也就是需要把左右切换的箭头移到容器的外面，自定义箭头的样式。
给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('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular怎样实现定时器效果

vue.js的数据传递与数据分发步骤详解

Atas ialah kandungan terperinci swiper插件怎样切换箭头按钮. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
swiper suis anak panah
sumber：php.cn
Artikel sebelumnya：vue+swiper如何实现侧边栏菜单 Artikel seterusnya：Vue组件通信Bus使用方法
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
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2235
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2377
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1986
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1873
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1942
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