對Slick的旋轉木馬邊緣的淡化效果

Question

我使用Ken Wheeler的插件Slick carousel，正如您在下圖中看到的那樣，當一張幻燈片在邊緣滑動時，看起來它正在被切斷。我正在考慮一個「褪色邊緣」，其中當幻燈片在邊緣滑動時，它具有「柔和」的效果。而不是這個突然的幻燈片消失，而是漸變（就像淡入淡出效果）。有什麼辦法可以做到嗎？

$('.carousel').slick({ 
 
    arrows: false, 
 
    autoplay: true, 
 
    autoplaySpeed: 1000, 
 
    speed: 2000, 
 
    slidesToShow: 5, 
 
    slidesToScroll: 1, 
 
    responsive: [{ 
 
     breakpoint: 1024, 
 
     settings: { 
 
     slidesToShow: 4 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 600, 
 
     settings: { 
 
     slidesToShow: 3 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 480, 
 
     settings: { 
 
     slidesToShow: 2 
 
     } 
 
    } 
 
    ] 
 
});

.container { 
 
    padding: 40px; 
 
    background-color: blue; 
 
} 
 

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> 
 
<script src="main.js"></script> 
 
<div class='container'> 
 
    <div class='carousel'> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a> 
 
    </div> 
 
    <div> 
 
     <a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你可以得到相當接近與background: linear-gradient();與:before + :after僞元素，但對於任何區域被覆蓋的鏈接不可點擊。只需根據需要更新width和rgba()的顏色即可。

UPDATE：

爲了使該鏈接可以點擊，即使他們得到覆蓋，你可以簡單地添加pointer-events: none;僞元素。

.carousel:before, 
.carousel:after { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    top: 0; 
    height: 100%; 
    pointer-events: none; /*makes the linkes behind clickable.*/ 
} 
.carousel:before { 
    left: 0; 
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
} 
.carousel:after { 
    right: 0; 
    background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
} 

jsFiddle

Answer 2

，你需要有一個衰落模擬所以透明度從0到70％

然後將容器內加入IMG第二兩次PNG圖片img應翻轉水平

css

.container img { 
position: absolute; 
height: 100%; 
z-index: 1; 
} 
/* selects the first img */ 
.container .img1 { 
float: left; 
left: 0; 
} 
/* selects the second img */ 
.container .img2 { 
float: right; 
right: 0; 
}