1

I've got a number of images inside a div, with the intent of having them lined up horizontally and having the user be able to swipe left/right to pan through the images like a slideshow.

The div has a set width/height, I've set overflow-x: auto, I've set display:inline, etc. etc.

I've tried a variety of combinations of float and display values for the div and the images. I've looked around for answers and tried a bunch, but none seem to work.

I've done it before where I have images in a table, which worked reasonably well, but I figured there has to be a simpler way to do it just through CSS.

Right?

EDIT: As requested, here is my code.

First I find my original div and clear it, and then the div that will hold the images is created. Then I take "car", which is a JSON object that was passed to the function, and it's "images" key (which is an array of images), and append each image to the imgSlides div.

Here's my JavaScript:

var div = document.getElementById("detailsDiv");
div.innerHTML = "";

var imgSlides = document.createElement('div');
imgSlides.setAttribute('class', 'imgSlides');
for(var i=0; i<car.images.data.length; i++){
    var img = document.createElement('img');
    var url = car.images.data[i].image_url;
    img.setAttribute('src', url);
    imgSlides.appendChild(img);
}
div.appendChild(imgSlides);

And here's my CSS:

#detailsDiv .imgSlides{
width:55%;
height: 55%;
overflow-x:scroll;
overflow-y:hidden;
display:inline;
}
#detailsDiv .imgSlides img{
width:90%;
height:auto;
display:inline;
float:left;
}

Any help is much appreciated

Dan

DanTheMan
  • 556
  • 2
  • 7
  • 21

1 Answers1

0

If you want to have only one line you can just add a white-space:nowrap to your style. You can check a similar answer here:

CSS horizontal scroll

If you want to really adapt the content to be able to show as many rows as possible you can use the calc function. You might find a good article on how to do it here:

Scroll a DIV horizontally using CSS

I hope it helps,

Community
  • 1
  • 1
Bruno Marotta
  • 443
  • 5
  • 12