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..

    How to get and set CSS class in TinyMCE editor?

    How to remove css class with some effect using jQuery?

    bootstrap css how to resolve conflict

    How to get the exact RGBa value set through CSS via Javascript?

    How do I provide navigation options on the sides of a centered logo?

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    How to get Jsfiddles working on a website? [duplicate]

    How do I manipulate the same function in javascript for two different classes

    how to apply css to web app?

    How to give style to iframed page content using parent pages css?

    How to make a CSS button work correctly?

    How to convert 2 css files into one swf file in flex 4.11 SDK

    how to optimize Less CSS? how to generate 1 minified version of all less files? I am also using modifyVars

    How to remove a element after animation?

    How to negate conjunction of two attributes in CSS selector

    How to make text wrap nicely below start of first line

    How to make css smaller?

    How can add atribute to css of page on page load event

    How to make an arrow pointing down after a section in HTML/CSS

    How can i align the text in center of a row in css?

    How does css position impact element width/height?

    How to show hidden div in the same line as the paragraph text?

    CSS Dropdown menu - How to add thumbnails

    How To Dark Image Background in CSS on hover?

    HTML/CSS/JS - How to change and image and text on click

    How to change select element's background color when it's selected?

    Smarty / How to include PHP function to compress CSS file

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    How to fix the css red notification bubble

    CSS Web fonts how to use it with use of @font-face its not working