自定義全寬度滑動滑塊

我正在嘗試構建一個特殊的全角度滑動輪盤：http://kenwheeler.github.io/slick/。
在部分的中間是當前顯示的幻燈片。左側和右側應該會看到前一張（上一張）和下一張（下一張）幻燈片的一小部分。
我設法創建了一個朝這個方向發展的版本。但你應該看到更多的prev和下一個滑塊。
這裏是它應該如何看在端部具有畫面：自定義全寬度滑動滑塊

實施例圖2：

這裏是一個CodePen例如與我的第一次嘗試：
https://codepen.io/Robocop/pen/BpbMKQ

這裏是我的HTML代碼：

<section class="top_slider"> 
    <div> 
     <img src="http://placehold.it/1300x300?text=1"> 
    </div> 
    <div> 
     <img src="http://placehold.it/1300x300?text=1"> 
    </div> 
    <div> 
     <img src="http://placehold.it/1300x300?text=1"> 
    </div> 
    <div> 
     <img src="http://placehold.it/1300x300?text=1"> 
    </div> 
    <div> 
     <img src="http://placehold.it/1300x300?text=1"> 
    </div> 
</section>

繼承人是JS-代碼：

$(".top_slider").slick({ 
    dots: false, 
    infinite: true, 
    centerMode: true, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    //arrows: false, 
    prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>', 
    nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>' 
});

最後的CSS-代碼：

.slider { 
    background-color: white; 
    margin: 100px auto; 
    height: auto!important; 
    } 

    .slick-slide { 
    margin: 0px 20px; 
    } 

.slick-slide img { 
width: 100%; 
}

來源

2017-02-15 robce

嘗試添加：centerPadding: '220px'到您的光滑初始化。調整數字以提供您想要的間距。填充值越高，上一張和下一張圖片顯示的越多。

來源

2017-02-16 09:14:57 AlxTheRed

就是這樣！你做了我的一天，謝謝 – robce

所有你需要做的，實現這一目標是改變

slidesToShow: 1,

到

slidesToShow: 2,

在您的JavaScrip中t文件。

來源

2017-02-15 21:39:36

中間的圖像滑塊必須是大的（幾乎是全角）圖像。示例圖片中不太清楚。上一張和下一張圖片必須裁剪並顯示。我在Code-Pen示例中做了這個。但現在它不完全是我想要的。從上一張和下一張圖片必須顯示比現在更多。我上傳了一張新圖片來展示我的意思（示例圖片2）。 – robce

我已經改變了保證金左側和保證金右側（。滑動幻燈片），但這並沒有帶來預期的成功。我希望現在更清楚我想要的。謝謝 – robce

自定義全寬度滑動滑塊

回答

相關問題