javascript - Displaying images in scrollable div - Stack Overflow

admin管理员组

文章数量:1419573

I have an array of images (src url for them) and I want to display them in a line, like so:

[Image1] [image2] [image3]

If there are a lot images I'd want the <div> they are in to bee scrollable, on the x-axis, so that the images are still in a line.

This is what I've got now:

<div style="overflow-x:scroll" class="col-md-12">
    <span ng-repeat="item in images" >
        <a ng-href="{{item.ServerRelativeUrl}}" target="_blank">
            <img width="128" ng-src="{{item.ServerRelativeUrl}}" alt="Description">
        </a>
    </span>
</div>

I do see the 'scroll' on the div, but faded. And my images are like this:

[Image1] [Image2] [Image3]

[Image4]

What am I missing here?

I have an array of images (src url for them) and I want to display them in a line, like so:

[Image1] [image2] [image3]

If there are a lot images I'd want the <div> they are in to bee scrollable, on the x-axis, so that the images are still in a line.

This is what I've got now:

<div style="overflow-x:scroll" class="col-md-12">
    <span ng-repeat="item in images" >
        <a ng-href="{{item.ServerRelativeUrl}}" target="_blank">
            <img width="128" ng-src="{{item.ServerRelativeUrl}}" alt="Description">
        </a>
    </span>
</div>

I do see the 'scroll' on the div, but faded. And my images are like this:

[Image1] [Image2] [Image3]

[Image4]

What am I missing here?

• javascript
• html
• css
• angularjs

Share Improve this question Follow asked Dec 9, 2015 at 12:18 schsch 1,38855 gold badges2020 silver badges3939 bronze badges 2

• Try removing col-md-12 – nipuna-g Commented Dec 9, 2015 at 12:27
• Add a fixed height to that parent div – Ash Thornton Commented Dec 9, 2015 at 12:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here you go: http://jsfiddle/danhaswings/nndhjp67/

HTML

<div id="slide">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
    <img src="http://placehold.it/100x100">
</div>

CSS

#slide {
    width: auto;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Add white-space: nowrap:

<div style="overflow-x:scroll; white-space: nowrap" class="col-md-12">

Try adding these CSS rules to your wrapper div.

overflow-x: scroll;
overflow-y: hidden;
width:100%;

本文标签： javascriptDisplaying images in scrollable divStack Overflow