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 achieve cellpadding with divs or likeiwse?

    How to apply a property only to the submit button

    How to reduce spacing between navigation links CSS

    How to hide part of css when input is empty?

    How to get Floating DIVs inside fixed-width DIV to continue horizontally?

    How to center a div tag in a html page without being affected by zooming

    How to prevent outside CSS from overriding web component styles

    CSS - How to only apply a style to a div that is inside another div?

    How to add own icons in bootstrap navbar

    how to set the child-class height as per the parent div using css

    How do i cover the image on navbar as well?

    How to fit label “css width”

    How to target items

    How to read from CSS files with jQuery

    How to call css styles in specific page in HTML?

    How to reorder controls of WYSIWYG editor

    How to create a sticky footer in CSS inside an absolutely positioned div?

    How to show reply and retweet icons using hover effect with css?

    How to dynamically add a class to li item and change its background color using javascript and css

    How to use position in CSS?

    advice about how to vertically center content in fluid element

    How to style Zend Checkboxes

    How to manage text breaks in span using js, css or anything else

    How to make gridview in asp.net scrollable?

    How to create header numbers with CSS

    How to change CSS according to user Operating System

    CSS Specificity - how to overlap twitter-bootstrap

    How can I stack two arrow images (upvote/downvote) on top of eachother using CSS?

    How does tablesort.js create the sort indicator arrows

    How to get SASS working with RequestReduce?