Slick: Full width carousel impossible; horizontal scroll bar appears.

[haopei]

Hello great carousel tool,

I want to set a slideshow to use the browser's full width, but my attempt to edit the CSS to achieve this result seems to be fruitless.

The problem can be best described right on http://kenwheeler.github.io/slick/. Let's open the Developer Tool on this page, and add the following code:

.slick-prev, .slick-next { width: 120px; !important } # Brings the next/prev buttons closer together
.blue h3{ margin: 0; background: black; !important } # Background made black so next/prev is visible
.content { padding: 0; width: auto; !important } # To make carousel span full width of browser

Looking at the first 'Single Item' demo, we would see that the carousel has now taken the full width of the page. This is the result that is desired. However, a horizontal scroll bar appears (please see attached screenshot).

Any idea how to fix this? Thank you for any assistance!

[kenwheeler]

This is not a bug. Why would you make the arrows 120px wide? Search the issues, there are a number of full width examples.

[haopei]

My apologies. Before I had created this issue, I had mistakenly searched only in "open issues" (github newbie) and could not find the solution. I've now found the solution. Thank you for slick!

[kenwheeler]

Sorry if I came off like a fuckin dickbag, I'm sorry :) Trying work through a backlog of bug reports here that accrued during a period where I have buying and house and having a kid.

The thread that will probably be helpful to you is #573

[haopei]

Oops, I meant "I've now found the solution". Best of luck in this exciting chapter of your life man. If you are able to build slick, I'm sure you'll manage the upcoming chaos well. And thank you so much again; I really appreciate this tool.

[kenwheeler]

Thank you!

[surjithctly]

@haopei What was your solution? I experience the same problem by having horizontal scroll on small screens. I use bootrstap and the live demo doesn't have the issue..

But when I remove the arrows, it works fine. I'm inspecting that arrow, seems no element goes outside. giving overflow-x to body seems a bad idea for me.

Any help @kenwheeler ?

I setup a quick jsfiddle : Please try adjusting preview width : http://jsfiddle.net/u39Lcrj3/

[wesleyfsmith]

I was getting this issue using full width slick with bootstrap 3. I wasn't using any arrows, but I wasn't explicitly setting arrows: false, so once I removed the arrows that fixed the issue. Thanks!

[alispa]

I had this problem too when body and html height and width were set to 100%. When I added to body and html margin: 0; it removed all the scrollbars.

[Shashank-Bhatt1]

Using bootstrap doesn't seems to work as expected

[lekhnath]

I have provided arrows:false in settings but still getting horizontal scrollbar

$(document).ready(function(){
  $('.your-class').slick({
    'autoplay': true,
    'autoplaySpeed': 5000,
    'arrows': false,
  });
});

[gemmarobinsonSS]

@lekhnath Just saw this as I was scrolling through for a solution to my own issue. You will find that if you remove the ' from around your settings they will work.
$(document).ready(function(){ $('.your-class').slick({ autoplay: true, autoplaySpeed: 5000, arrows: false, }); });