CSS: how to make a horizontal images scroller with two images per column?

Tags: css

Problem :

I have an horizontal images scroller, like this:

This the markup:

<div class="slider-horizontal">
  <span ng-repeat="image in images">
    <a href="#">
      <img ng-src="{{image}}" />
    </a>
  </span>
</div>

And this the style:

.slider-horizontal {
  white-space: nowrap;
  overflow: auto;
  overflow-y: hidden;
}

No, I would like to add a secondary image below any of the current ones, to obtain something like this:

(N.B.: of course nor persons nor the discount label are the real images... :-)

Is it possible? What would you suggest? I can't manage it, all of my trials end up with all of the images on the same row, or all on the same column... :-(

To reply to @rednaw comment: this is what I did try:

<div class="slider-horizontal">
  <span ng-repeat="image in images">
    <a href="#">
      <img ng-src="{{image}}" />
      <img src="images/watermarks/label.png" />
    </a>
  </span>
</div>

(whith not great success, as I said... :-()

---

Solution :

EDITED:

Did u try something like this

<div class="slider-horizontal">
  <span class="slider-image" ng-repeat="image in images">
    <a href="#">
      <img ng-src="{{image}}" /><br>
      <img src="myimg.jpg" />
    </a>
  </span>
</div>

CSS:

.slider-horizontal {
  white-space: nowrap;
  overflow: auto;
  overflow-y: hidden;
}

.slider-image {
  float: left;
  margin-right: 20px;
  display: inline-block;
}