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


Tags: css

Problem :

I have an horizontal images scroller, like this: scroller with single images

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:

scroller with double images

(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;
}

    CSS Howto..

    Google Apps Script How to link to JS or CSS file on Google Drive

    twitter bootstrap - how to skip a line?

    How to reduce space between unordered list and its previous element(center)?

    how to place the images exactly in menu position

    how to use removeclass() function in Jquery to disable the CSS

    How to make arrow in CSS with angle?

    How to make a CSS border for a dropdown menu?

    How to create css shadow effect [duplicate]

    how to make my horizontal css dock navigation to vertical

    Show just cursor (caret) but hide the letters in input

    How to use @page CSS in ASP.NET MVC View

    How is box-shadow returned in IE9?

    How to correctly set the column widths on my HTML table?

    HTML with CSS: How to style font in a table?

    How to know if an element is rendered?

    CSS: Adding border to button on hover. How avoiding a shifting of the following elements? [duplicate]

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How to override position : absolute in css?

    How to make possible vertical scroll on popup and disable vertical scroll for page by using CSS?

    How to ensure updated files are served instead of cached ones?

    How to set background image to keep its position while browser width is changing?

    How to pass a css % parameter in javascript/jquery

    How to make outer div inherit height of inner, non-floated divs?

    How to make button that changes grid dimensions using JS?

    How to change css properties on hover parent element?

    How to set each type of page transition to a specific page? (css animations)

    How to grab the element with certain CSS property value inline

    How work with degree or start and stop in linear-gradient CSS3

    How do I get a CSS Selector to Skip Over?

    select tag in Google Chrome shows lowercase options