swiper3的前进、后退按钮放到容器的外面

最新推荐文章于 2024-07-25 17:40:48 发布

前端一枚

最新推荐文章于 2024-07-25 17:40:48 发布

阅读量2.2k

点赞数 1

分类专栏： vue js swiper 文章标签： swiper3 swiper3前进后退按钮

本文链接：https://blog.csdn.net/u011200562/article/details/117564381

版权

本文展示了如何在Swiper3中将前进和后退按钮放置在swiper-container外部，以避免被外部容器的overflow属性隐藏。通过实例代码（包括HTML, JS, CSS）详细解释了实现这一功能的方法。" 118816760,8753399,wxWidgets中的wxColourPickerCtrl使用详解,"['GUI开发', 'C++', 'wxWidgets框架', '图形用户界面', '颜色选择器']

摘要由CSDN通过智能技术生成

先上效果图
在这里插入图片描述
注意：我用的swiper3的版本，版本不同初始化的方式不同
我把前进、后退按钮放到了swiper-container2容器的外面，防止被外面的容器overflow掉
附上代码
html

    <div class="equipBox">
      <div class="swiper-container2" ref="swiperRef2">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in equipTypeArr"
            :key="index"
          >
            <span>
              {
  { item.name }}