swiper 外层添加左右箭头

最新推荐文章于 2024-04-16 09:06:12 发布

香微天下

最新推荐文章于 2024-04-16 09:06:12 发布

阅读量1k

点赞数

文章标签： html5 前端 jquery html

本文链接：https://blog.youkuaiyun.com/weixin_35704268/article/details/119003881

版权

在创建Swiper滑动效果时，为Swiper-container添加一个包含左右箭头的外层容器，通过设置CSS定位使箭头显示在滑动内容两侧。此方法允许自定义箭头的位置和样式，实现更个性化的导航体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很简单：

就是给swiper-container 外层再添加一个父元素添加position：relative 定位，把箭头写入父元素内，至于要把箭头左右偏移多少就看你的心情喽！！！

//父容器
<div class="arrowPositon">

                //两个箭头
               <div class="swiper-button-next "></div>
               <div class="swiper-button-prev "></div>

//swiper容器
               <div class="swiper-container ">
                   <div class="swiper-wrapper ">
                       <div class="swiper-slide">
swiper111111111
                       </div>
                       <div class="swiper-slide">
                           swiper2222222
                       </div>
                       <div class="swiper-slide">
                           swiper3333333
                       </div>
                   </div>
                   
                   <div class="swiper-pagination"></div>
               </div>
           </div>