如何使用圓滑的滑塊顯示全屏背景圖像滑塊？

Question

我正在使用slick-slider（ http://kenwheeler.github.io/slick/ ）。 我必須顯示帶有背景圖像的滑塊，但是圖像不顯示。 我必須在全屏上顯示圖像。 另外，如何使用slideUp動畫？ 我應該使用插入背景的嵌入式圖像嗎？

您能幫我解決這個問題嗎？

 $('.slider').slick({ slidesToShow: 1, // autoplay: true, //autoplaySpeed: 5000, dots: true, infinite: true, speed: 300, fade: true, }); 

 html, body { margin: 0; padding: 0; height: 100%; } .slick-slider { height: 100%; } .slide1 { background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg') } .slide2 { background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg') } .slider { width: 100%; } .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out .3s; opacity: .2; } .slick-active { opacity: .5; } .slick-current { opacity: 1; } .a-slide { background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <div class="slider"> <div class="a-slide slide1"></div> <div class="a-slide slide2"></div> </div> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript"></script> 

Answer 1

您需要定義滑塊中所有內部div的高度。

 $('.slider').slick({ slidesToShow: 1, // autoplay: true, //autoplaySpeed: 5000, dots: true, infinite: true, speed: 300, vertical: true }); 

 html, body { margin: 0; padding: 0; height: 100%; } .slick-slider { height: 100%; } .slider div { height: 100% !important; /* added this */ } .slide1 { background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg'); } .slide2 { background: url('https://cdn.pixabay.com/photo/2018/05/28/22/11/message-in-a-bottle-3437294__340.jpg'); } .slider { width: 100%; } .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out .3s; opacity: .2; } .slick-active { opacity: .5; } .slick-current { opacity: 1; } .a-slide { background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <div class="slider"> <div class="a-slide slide1"></div> <div class="a-slide slide2"></div> </div> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" type="text/javascript"></script>