CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
ncrouch25
ncrouch25

Reputation: 270

How to make slick carousel full screen?

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

Upvotes: 5

Views: 17339

Answers (3)

Danielle Davis
Danielle Davis

Reputation: 161

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

Upvotes: 2

Alvaro Silvino
Alvaro Silvino

Reputation: 9733

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

Upvotes: 1

A.Sharma
A.Sharma

Reputation: 2799

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

Upvotes: 6

Related Questions