swiper插件自定义切换箭头按钮

来源：互联网发布：淘宝禁售商品奶粉编辑：程序博客网时间：2024/05/16 16:55

不知道大家在使用swiper时有没有遇到这样一种需求，话不多说，直接上gif。

这里写图片描述

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

<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>

<body>    <div class="out_container">        <div class="in_container">            <div class="swiper-wrapper">                <div class="swiper-slide"><img src="" alt=""></div>                <div class="swiper-slide"><img src="" alt=""></div>                <div class="swiper-slide"><img src="" alt=""></div>            </div>            <div class="swiper-button-prev swiper_btn"></div>            <div class="swiper-button-next swiper_btn"></div>        </div>    </div></body>

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

效果如下
这里写图片描述

阅读全文

0 0