Slickのカルーセルエッジでのフェード効果

Question

私はKen WheelerのプラグインSlick carouselを使用しています。下の図に示すように、スライドがエッジでスライドしていると、カットされているように見えます。私は、スライドがエッジでスライドするとき、それは "より柔らかい"効果を持っている "フェードエッジ"を考えています。この急激なスライドの消失の代わりに、徐々に（フェード効果のように）徐々に消える。それを行う方法はありますか？あなたがフェージング模倣ので、透明性がコンテナ内で、その後、0〜70％

になりました.pngの画像を1秒間に2回のimgを追加必要

$('.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();:after + :beforeと擬似要素とかなり近い得ることができますが、任意の領域をカバーしますためのリンクはクリックできません。必要に応じて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

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