How to make slick carousel full screen?

Question

I'm trying to make a carousel take up the entire screen, nothing I'm trying seems to work...

  $('.scroller').slick({ dots: true, infinite: true, autoplay: true }) 

 .scroller { div { text-align: center; font-size: 30px; max-height: 100%; } } .slick-prev::before, .slick-next::before { color: #000; } .slick-next { right: -5px; } .slick-prev { left: -5px; } 

 <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> </div> 

setting the max height to 100% did nothing to fix it. It is currently only covering about one third of the page

Answer 1

You can set the height of the scroller dynamically to the height of the screen with JQuery:

$(document).ready(function(){
  $('.scroller').css('height', $(window).height() + 'px');
});

Answer 2

You can use this function .

var elem = document.getElementByClassName("scroller")[0];
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Answer 3

In css....

Make your slick container...

height: 100vh;

then make sure BOTH:

the child element of your slick container with class .slick-track

AND

your slide elements

have height: 100%;