スリックスライダ - ボックスシャドウがカットオフ

Question

滑らかなスライダdivにはのオーバーフローがあります。ですので、スライドのdivのボックスシャドウは途切れてしまいます。

誰もこの問題に遭遇しましたか？ここで

は、問題を実証少しフィドルです： https://jsfiddle.net/2zvcud0u/

HTML

<div class="slider row"> 
    <div class="col-sm-4"> 
     <div class="drop-shadow"> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drop-shadow"> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drop-shadow"> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="drop-shadow"> 
     <div class="content"> 
      <p>Lorem ipsum dolor sit amet</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.row{ 
    margin: 20px 0; 
} 

.drop-shadow { 
    box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35); 
} 

.content{ 
    margin: 10px; 
} 

JS

$('.slider').slick({ 
    autoplay: false, 
    dots: false, 
    arrows: false, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    swipeToSlide: true, 
    responsive: [{ 
    breakpoint: 992, 
    settings: { 
     slidesToShow: 2 
    } 
    }, { 
    breakpoint: 768, 
    settings: { 
     slidesToShow: 1 
    } 
    }] 
}); 

何かアドバイスをありがとう

Answer 1

私は静かで簡単な解決策を見つけたと思う。

私たちは、次のCSSとスライダーの周りにラッパーのdivを置く：最初の部分のための

.slick-list { 
    overflow: visible; 
} 

厥それを：

.slider-wrapper { 
    width: calc(100% + 30px); //we need more width for the shadows on the edges 
    padding: 0 15px; //space for the shadows 
    margin-left: -15px; //put the div in its original position 
    overflow: hidden; //hide the overflow 
} 

私たちは、目に見える滑らかなリストのdivオーバーフローを作ります。

もう1つの問題は、オーバーフロー内の最初の要素のボックスシャドウが引き続き表示されることです。

これはそれを修正する必要があります

.slick-slide .drop-shadow { 
    box-shadow: none; //no shadow for a hidden slide 
    transition: box-shadow 0.1s ease-in-out; //little effect to fade the shadow 
} 

.slick-slide.slick-active .drop-shadow { 
    box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35); //only the active slides have the shadow 
} 

はここで別のデモフィドルです： https://jsfiddle.net/cc5fmwaL/2/

私は私が誰かを助け、このクイックソリューションを改訂して自由に感じることを願っています。