Hatena 
This article is for the person who want to customize arrows of Swiper slider.
I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js
①Create a normal swiper slider
To make it crear, we will create normal swiper slider first and then make changes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/sample1.png"></div>
<div class="swiper-slide"><img src="img/sample2.png"></div>
<div class="swiper-slide"><img src="img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //loop
autoplay: { //autoplay
delay: 2000,
},
pagination: { //pagination(dots)
el: '.swiper-pagination',
},
navigation: { //navigation(arrows)
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>Now we can see normal swiper slider.
②Add arrows by img tag
Add img tag to above HTML.
<div class="swiper-button-prev">
<img src="img/arrow_left.png"> <!--added-->
</div>
<div class="swiper-button-next">
<img src="img/arrow_right.png"> <!--added-->
</div>Now arrow image has been added.
③Hide default arrow
let’s hide default arrows because we don’t need it.
.sample-slider [class^="swiper-button-"]::after{
content: "";
}Default arrows have been gone.
④Adjust size and position of arrows
Adjust size and position of arrows by CSS.
/*adjust arrow size*/
.sample-slider [class^="swiper-button-"]{
width: 55px;
height: 55px;
}
/*adjust arrow position*/
.sample-slider .swiper-button-next{
right: -5px;
}
.sample-slider .swiper-button-prev{
left: -5px;
}The full text of source code
In the end, I put the full text of source code.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
/*hide default arrows*/
.sample-slider [class^="swiper-button-"]::after{
content: "";
}
/*adjust arrow size*/
.sample-slider [class^="swiper-button-"]{
width: 55px;
height: 55px;
}
/*adjust arrow position*/
.sample-slider .swiper-button-next{
right: -5px;
}
.sample-slider .swiper-button-prev{
left: -5px;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/sample1.png"></div>
<div class="swiper-slide"><img src="img/sample2.png"></div>
<div class="swiper-slide"><img src="img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev">
<img src="img/arrow_left.png"> <!--arrow image-->
</div>
<div class="swiper-button-next">
<img src="img/arrow_right.png"> <!--arrow image-->
</div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //loop
autoplay: { //autoplay
delay: 2000,
},
pagination: { //pagination（dots）
el: '.swiper-pagination',
},
navigation: { //navigation（arrows）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>That is all, it was about How to customize arrows of Swiper slider.
If you want to know how to customize pagination, below article might be helpful.
[Swiper]How to customize pagination of Swiper slider
Followed the tutorial, just ran into one problem. My icons are disappearing after the first slide. Any idea how to fix that?
I am sorry for the late reply, Joe.
Can you show me the source code which you wrote?(if you still get the same problem)
Then I will try to clarify what is going on.
(I just tried to make swiper slider along with this article but did not get any problem..)