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

先上效果图

注意：我用的swiper3的版本，版本不同初始化的方式不同
我把前进、后退按钮放到了swiper-container2容器的外面，防止被外面的容器overflow掉
附上代码
html

    <div class="equipBox"><div class="swiper-container2" ref="swiperRef2"><div class="swiper-wrapper"><divclass="swiper-slide"v-for="(item, index) in equipTypeArr":key="index"><span>{{ item.name }}</span></div></div></div><div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。--><div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。--></div>

    equipSwiperInit() {var mySwiper = new Swiper(".swiper-container2", {direction: "horizontal",loop: true,speed: 3000,slidesPerView: 4,autoplay: false,prevButton: ".swiper-button-prev",nextButton: ".swiper-button-next",});},

css

.equipBox {position: absolute;top: 5vh;left: 2vw;width: 23vw;padding: 0 20px;box-sizing: border-box;.swiper-container2 {width: 100%;overflow: hidden;color: #fff;.swiper-wrapper {.swiper-slide {padding: 0 5px;box-sizing: border-box;span {padding: 0 20px;width: 100%;box-sizing: border-box;height: 30px;line-height: 30px;display: inline-block;background-image: url("../../../assets/images/sy/sybg/btnBg.png");background-size: 100% 100%;}}}}.swiper-button-prev,.swiper-button-next {background-image: none;height: 100%;position: absolute;margin: 0;top: 0;z-index: 999;}.swiper-button-prev {left: 0px;&:after {content: "";position: absolute;top: 50%;transform: translateY(-50%);display: inline-block;border-width: 10px;border-color: transparent #16f7ff transparent transparent;border-style: solid;}}.swiper-button-next {right: -10px;&:after {content: "";position: absolute;top: 50%;transform: translateY(-50%);display: inline-block;border-width: 10px;border-color: transparent transparent transparent #16f7ff;border-style: solid;}}
}

swiper3的前进、后退按钮放到容器的外面相关推荐

vue3中使用 swiper 插件，自定义切换按钮，将前进后退、左右切换按钮放到容器外部
今天在使用 swiper 时,遇到一个坑爹的问题. swiper 组件的本来样式长这样: 左右切换的按钮在滑动容器内部,但是我们想要它跑到容器外面去. 网上找了一堆方法都不好使也不知道是不是因为 ...
swiper组件如何自定义分页符和前进后退按钮
前提今天产品提了这样一个需求:用户在首次登录后,要展示一个引流的轮播图,其内容主要是对新功能的图文说明(类似于王者荣耀每次更新时的内容一览轮播图,如下图所示).如果非首次登录,则让它隐藏掉即可.注: ...
Swiper轮播图插件之如何修改前进后退按钮swiper-button-prev和swiper-button-next的默认样式
第一步: 在轮播图最外层的容器中将原本前进后退按钮的大小设置为0 注意: Swiper6之前的默认容器是'.swiper-container',Swiper7之后的默认容器是'.swiper'. .s ...
IE后退按钮过期原因
我们为了让客户端每次访问服务器都得到的是最新的页面,一般会禁止客户端的缓存,但是有时候使用IE的后退按钮,IE不会自动向服务器提交请求,而是显示一个提示页面过期的警告页面:警告: 网页已经过期您申请 ...
如何隐藏iPhone导航栏上的“后退”按钮？
本文翻译自:How to hide 'Back' button on navigation bar on iPhone? I added a navigation control to switch ...
后退键无效 html,javascript – Cordova – window.history.back()不支持iOS 9中的HTML后退按钮...
在我的应用程序中,我使用window.history.back导航回上一个View 后退按钮声明按钮动作: $("#verification_back_icon").on(&qu ...
html搜索结果重置,搜索结果和后退按钮/ HTML表格
我正在寻找解决方案,以解决我在应用程序中使用基于表单的搜索结果时遇到的问题.搜索结果和后退按钮/ HTML表格基本上,当用户使用HTML表单进行搜索并在下一页显示来自数据库的结果时,此功能完美无缺. ...
关于页面之间传参时有空格,中文及点击页面后退按钮的问题
今天心情不错,解决了一些小bug,然后要进行下小总结了..... 首先说这页面间传参,有时传的参数是带有空格的比如一小部分sql语句,怎么办呢? 两种解决方案:1.当进行form表单提交时,用隐藏术 ...
php 后退按钮事件,php – 后退按钮的会话问题
我在php文件中有这个代码,它包含在我要共享的所有页面中并保护我的页面. session_name("login"); session_start(); if (!isset($_ ...

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

swiper3的前进、后退按钮放到容器的外面相关推荐

最新文章

热门文章