Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Full width carousel impossible; horizontal scroll bar appears.

See original GitHub issue

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).

screen shot 2014-10-03 at 4 02 23 pm

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

Issue Analytics

State:
Created 9 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

7reactions

wesleyfsmithcommented, Jan 9, 2017

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!

5reactions

kenwheelercommented, Oct 4, 2014

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

Top Results From Across the Web

disable horizontal scroll on mobile web - Stack Overflow

I tried to put overflow-x: hidden but it's not working. The width is auto, so that it will actually automatically resize the web...

How to find the cause of horizontal scrollbars - Polypane

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you...

scrollbar-width - CSS: Cascading Style Sheets - MDN Web Docs

The scrollbar-width property allows the author to set the maximum thickness of an element's scrollbars when they are shown.

How To Hide Scrollbars With CSS - W3Schools

Learn how to hide scrollbars with CSS. How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example....

React scroll horizontal - La Bina Travel Designer

In this article, we will use the package called react-spring-3d-carousel. v1. ... Syntax to assign list/items in the horizontal Scroll the horizontal bar...