滑動器中心的箭頭 slider

Question

誰能幫我寫 HTML 和 JS 代碼來實現 slider 中心的箭頭，如下圖所示？ 有一段時間我在做這件事時遇到了問題，所以如果有人能想出點什么，我將不勝感激。 您也可以訪問https://xd.adobe.com/view/e9006d17-86b0-416d-b018-9c767c9cfc8f-bc53/來查看我所說的箭頭。

滑動器 slider 箭頭在中心

Answer 1

下面的代碼將幫助您將滑動箭頭制作到 slider 的底部中心。您可以根據自己的意願增加或減少提供的30px來調整箭頭的left right 。

.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);
}

Answer 2

 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>