Question

http://sorgalla.com/projects/jcarousel/

Above is the carousel application i’m using (one of the more popular open source ones at the moment) and I can’t figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page – when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.

Answer 1

That carousel uses <img> tags which means you’d either have to specify each width in the markup like this:

<img src="..." height="..." width="170" />

or use the img selector in the CSS file, something like this:

.jcarousel-skin-tango .jcarousel-item-horizontal img {
    width: 170px;
}

Either way, you’d also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:

ul#carousel {
   width: 99999px;
}

The carousel would stop at the last image anyway, but at least you’d know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.