swiper 很好用，但是设计可不会按照 swiper 的样式给你设计图，一般情况下轮播图会有下面这种情况：
swiper 本身的箭头在里面；
而我们需要箭头在外面；
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>
<!-- 增加一个father的包裹 -->
<
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
>
<!-- siwper原本的箭头放在这里 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</
div
>
<!-- 我们把swiper 的箭头放到swiper 外面 -->
<!-- <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>
<!-- 增加一个father的包裹 -->
<
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
>
<!-- siwper原本的箭头放在这里 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> -->
</
div
>
<!-- 我们把swiper 的箭头放到swiper 外面 -->
<
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自带的样式是不一样，那么如何处理？
那就换掉好了，找到设置这个箭头的类名，然后强行覆盖掉，使用自己的图片，简单粗暴；