How to Horizontally Scroll Images In Single Line [duplicate]

Question

I am trying to create a sort of basic carousel of images. My question is: how can I get all my slides to display in one line and get them to scroll horizontally instead of vertically?

Here is an example: http://jsfiddle.net/3f7fcspL/

HTML:

<div id="carousel">
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
</div>

CSS:

#carousel {
    width: 100%;
    height: 150px;
    background-color: #ff0000;
    overflow: auto;
}

#carousel .slide {
    display: inline-block;
}

you are missing: white-space: nowrap; in your #carousel css class. — Desolator
– Desolator, Commented May 12, 2015 at 3:10

Akshay · Accepted Answer · 2015-05-12 03:10:26Z

29

Simply add white-space:nowrap

#carousel {
    width: 100%;
    height: 150px;
    background-color: #ff0000;
    
    overflow: visible;
    white-space:nowrap;
}

#carousel .slide {
    display: inline-block;
}

<div id="carousel">
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
    <div class="slide">
        <img src="http://placehold.it/300x150"/>
    </div>
</div>

answered May 12, 2015 at 3:10

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Shevelev Over a year ago

You should use "overflow: auto" if you need a scroll inside a screen.

Collectives™ on Stack Overflow

How to Horizontally Scroll Images In Single Line [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related