How to Horizontally Scroll Images In Single Line

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, May 12 '15 at 03:10

score 28 · Accepted Answer · answered May 12 '15 at 03:10

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>

You should use "overflow: auto" if you need a scroll inside a screen. — Alex Shevelev, Sep 06 '19 at 09:27

How to Horizontally Scroll Images In Single Line

1 Answers1