Can anyone help me to write HTML and JS code for implementing arrows in the center of the slider like on the image below? I had a problem for some time doing this, so if anyone can come up with something, I would be very grateful. You can also visit https://xd.adobe.com/view/e9006d17-86b0-416d-b018-9c767c9cfc8f-bc53/ to see the arrows I'm talking about.
The below code will help you in making the swiper arrows to the bottom center of the slider. You can adjust the left and right positions of the arrows by increasing or decreasing the 30px provided according to your wish.
.swiper-button-next, .swiper-button-prev {
bottom: 0;
top: auto;
transform: translateX(-50%);
}
.swiper-button-prev {
left: calc(50% - 30px);
}
.swiper-button-next {
right: calc(50% - 30px);
}
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
spaceBetween: 30,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true
});.swiper_wrap{
position:relative
}
.swiper-button-next, .swiper-button-prev {
bottom: -50px !important;
top: unset !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
}
.swiper-button-prev {
left: -30px !important;
}
.swiper-button-next {
left: 30px !important;
}
.swiper-slide img{
height:150px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<div class="swiper_wrap">
<div class="slider-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg">
</a>
</div><div class="swiper-slide">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2015/01/07/16/37/wood-591631_960_720.jpg">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>