¿Alguien puede ayudarme a escribir código HTML y JS para implementar flechas en el centro del control deslizante como en la imagen a continuación? Tuve un problema durante algún tiempo al hacer esto, así que si alguien puede aportar algo, estaría muy agradecido. También puede visitar https://xd.adobe.com/view/e9006d17-86b0-416d-b018-9c767c9cfc8f-bc53/ para ver las flechas de las que hablo.
El siguiente código lo ayudará a hacer que las flechas del deslizador se ubiquen en la parte inferior central del control deslizante. Puede ajustar las posiciones left y right de las flechas aumentando o disminuyendo los 30px proporcionados según su deseo.
.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>