实现 swiper 的左右箭头放到外面，定制箭头的样式

梦里梦外; 2022-05-22 06:48 615阅读 0赞

swiper 很好用，但是设计可不会按照 swiper 的样式给你设计图，一般情况下轮播图会有下面这种情况：

swiper 本身的箭头在里面；

而我们需要箭头在外面；

![70][]

swiper 默认的样式是 箭头部分在内部，那我们要如何实现siwper 的箭头放到外面呢？

第一步：实现一个不带箭头的轮播图；

代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >Document </ title >

< link href= "https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css" rel= "stylesheet" >

< script  src = "./swiper.min.js" > < / script >

< style >

.swiper-container \{

border : 1 px  solid red;

width : 400 px ;

height : 400 px ;

.swiper-slide \{

width : 400 px ;

height : 400 px ;

background : orange;

*/\* .swiper-father\{*

*width:500px;*

*height:400px;*

*border:1px solid red;*

*position:relative;*

*\} \*/*

< / style >

</ head>

< body>

**

< div class= "swiper-father" >

< div class= "swiper-container" >

< div class= "swiper-wrapper" >

< div class= "swiper-slide" >slide1 </ div >

< div class= "swiper-slide" >slide2 </ div >

< div class= "swiper-slide" >slide3 </ div >

</ div >

**

*<!-- <div class="swiper-button-prev"></div>*

*<div class="swiper-button-next"></div> -->*

</ div >

**

*<!-- <div class="swiper-button-prev"></div>*

*<div class="swiper-button-next"></div> -->*

</ div >

< script >

**var**  mySwiper =new  Swiper ( '.swiper-container' ,\{

direction:  'horizontal' ,

loop:  false ,

*// navigation: \{*

*// nextEl: '.swiper-button-next',*

*// prevEl: '.swiper-button-prev',*

*// \},*

\});

< / script >

</ body>

</ html>

第二步：在swiper-container 外面增加一个包裹，也就是套一个div，给这个div增加相对定位；

把箭头的代码添加在swiper-container 外面，也就是把上一步的代码中的注释打开；

代码：

<!DOCTYPE html>

< html lang= "en">

< head>

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >Document </ title >

< link href= "https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css" rel= "stylesheet" >

< script  src = "./swiper.min.js" > < / script >

< style >

.swiper-container \{

border : 1 px  solid red;

width : 400 px ;

height : 400 px ;

.swiper-slide \{

width : 400 px ;

height : 400 px ;

background : orange;

.swiper-father \{

width : 500 px ;

height : 400 px ;

border : 1 px  solid red;

position :relative;

< / style >

</ head>

< body>

**

< div class= "swiper-father" >

< div class= "swiper-container" >

< div class= "swiper-wrapper" >

< div class= "swiper-slide" >slide1 </ div >

< div class= "swiper-slide" >slide2 </ div >

< div class= "swiper-slide" >slide3 </ div >

</ div >

**

*<!-- <div class="swiper-button-prev"></div>*

*<div class="swiper-button-next"></div> -->*

</ div >

**

< div class= "swiper-button-prev"></ div>

< div class= "swiper-button-next"></ div>

</ div >

< script >

**var**  mySwiper =new  Swiper ( '.swiper-container' ,\{

direction:  'horizontal' ,

loop:  false ,

navigation: \{

nextEl:  '.swiper-button-next' ,

prevEl:  '.swiper-button-prev' ,

\},

\});

< / script >

</ body>

</ html>

上面就可以实现了箭头放到外面的效果；

另外，设计给的箭头的样式和siwper自带的样式是不一样，那么如何处理？

那就换掉好了，找到设置这个箭头的类名，然后强行覆盖掉，使用自己的图片，简单粗暴；

[70]: /images/20220522/dc5e0a9730964e83bf38e4e8d3d86aa3.png

实现 swiper 的左右箭头放到外面，定制箭头的样式

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css实现--三角形/箭头（上下左右）--详细原理

相关 vue使用swiper插件修改左右箭头的默认样式

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

相关 html向左箭头样式,html – CSS中的尖头/角度箭头样式边框

相关 html实现图片轮播切换箭头,最简单jquery实现带左右箭头和数字焦点的图片轮播...

相关原生JS 左右箭头选择日期

相关实现 swiper 的左右箭头放到外面，定制箭头的样式

相关 ionic改变返回箭头样式

相关 css上下左右箭头

相关用css样式实现返回箭头