CODEWITHSUNDEEP
cssresponsive-designcarousel
Priscila
Priscila

Reputation: 23

Slick carousel not responsive (and wider than page)

I'm trying to use Slick carousel in my website, but I've been having some problems with its width.

When I load the page, it fits the div well, but, when I minimize the window, it stays with the same width, creating an horizontal scroll bar. Besides, the right arrow gets outside of the bounds of the page content.

I've tried to use OWL Carousel before and ended up with the same problem (and others more). Does any of you has any idea of what this might be?

Edit: I've realised that the carousel stays with a fixed width when the screen reaches 963px of width. I use @media queries in my CSS and one of them is for 963px or smaller screens. This is probably related, I just don't know how yet.

Another edit: Slick-track width, in my screen (1280px), is 6000px. As I start to decrease the width of the screen, this number decreases as well, until the screen reaches 963px, then this number jumps to 7200px and gets wider than the outer div. Slick-track is inside the carousel's divs, which is inside the following divs: content, wrapper, body and html. I've just put everything in a fiddle: /pris0213/ovov7xwx/. Notice that the wrapper has max-width of 1500px; that's the width that the divs get when the screen gets smaller (962px or less).

Upvotes: 2

Views: 13621

Answers (3)

Sultan Aslam
Sultan Aslam

Reputation: 6238

If you initialize a slick carousel inside of a flexbox element, then the slick carousel increases it's width exponentially. To avoid from this add min-width:0 to its parent or to * elements.

LIKE THIS:

* {
  min-height: 0;
  min-width: 0;
}

Upvotes: 2

AuRise
AuRise

Reputation: 2452

I was having the same issue; slider looked fine on desktop but stayed the same height and was not responsive as the screen size got smaller, and my fix was stupidly simple.

For whatever reason, the default stylesheet that came with slick only applies display: block; to .slick-slide img and I just needed to add the width and height like so:

.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
 }

This may not be the answer to this specific person's problem, but it was the same question/problem I had (just a different cause) and this question was a top hit in the search results, so I figure I'd add in my solution as well in case someone else comes across this and it could help them.

Upvotes: 3

Chris Dobson
Chris Dobson

Reputation: 150

The CSS within the @media rule you've described will only be applied once the width of the screen drops below 962px; the CSS applied by this rule is causing your carousel to break.

Without seeing the HTML and CSS, I can't solve your problem - I recommend that you check the width of the div containing the carousel slides and make sure that it can fit all of the content horizontally within it (If you're sticking to the Slick carousel classes, it should be the div with the slick-track class).

Edit: After looking at the code that you provided, I've found your problem:

@media only screen and (min-width: 768px) {
    .content {
        padding: 0 10%;
    }
}

When the screen has a minimum width of 768px, <div class="content"> has padding on its sides, pushing the gallery contents inwards. The arrows are purposefully positioned outside the div where the slick carousel exists (Inside <div class="gallery">) and happily sit on top of the space created by the padding.

However, once the screen goes below this minimum width, <div class="content"> loses the padding. The width of <div class="gallery"> increases to fit into the newly available space and pushes the arrows further outwards; you can't see this in JSFiddle because it is pushed out of the frame and hidden. As a result, you can no longer see the arrows and a horizontal scroll bar appears to accommodate for the extra width from the arrows.

You can overcome this problem by applying the same padding to the content at any width. If you need the above code to stay as it is though, you could try this:

@media only screen and (max-width: 767px) {
    .gallery {
        margin: 0 10%; //Replace the lost padding with a margin
    }
}

Upvotes: 1

Related Questions