How to display the fullscreen background image slider using the slick slider?

Question

I am using slick-slider( http://kenwheeler.github.io/slick/ ). I have to display the slider with background image but images are not displaying. I have to display an image on the full screen. Also, how can I use slideUp animation? Should I use inline image instated of background?

Would you help me out with this issue?

 $('.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

You have need to define height to all inner div in slider.

 $('.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>