如何在全屏滑塊上添加箭頭

Question

我最近為一個攝影朋友完成了一個網站，他回到我身邊說，他的項目頁面上的滑塊很難使用，他想要箭頭，每當我嘗試向其中添加箭頭時，我發現導航就會推動箭頭視而不見，我想知道是否有人知道解決此問題的方法。

請參閱以下頁面鏈接。 先感謝您。

Daniels網站

Answer 1

您鏈接的網站使用Swiper，它是滑塊的框架。 根據《 入門指南》 ，您需要添加兩個箭頭，您的朋友似乎已經注釋掉了。 由於您的站點具有jQuery，因此您還需要在document.ready事件中對其進行初始化。 嘗試將代碼放入事件中，如下所示：

  $(document).ready(function () {
    //initialize swiper when document ready  
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 0,
        loop: true,
        centeredSlides: true,
        autoplay: 7000,
        autoplayDisableOnInteraction: false,
        slidesPerView: 1,
        effect: 'fade'
    })
  });