how do i change image width in jCarousel?


Tags: css,image,width,jcarousel

Problem :

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.



Solution :

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.


    CSS Howto..

    How to expand vertically web's body when open menu

    How can I make make css transition happen when applying width through javascript

    Show tooltip content when its hovers

    How to arrange three flex div side by side

    How to force span to use parent font-family in CSS

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    CSS - How to remove comments and make CSS one line

    How to store a global variable in JQuery?

    How to morph multi-part css properties with Mootools Fx?

    How can I apply a style to element if the user came to website using a link with an anchor/hash [closed]

    How to create shadow in JSF input field

    How to fire a new css animation when the element already has one?

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

    How to efficiently update css on multiple selector classes in jquery

    How to Prevent Linke break for Divs in CSS?

    How to make the main content div fill height of screen with css [duplicate]

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How to link css to html in an express project?

    How to use background css for an image not in the Content or Resource folder

    How to apply effect just to background image and not text

    How can I indent all text in a paragraph except the first line?

    How to have background color outside of radius border in a tbody in chrome?

    how to remove the css overflow:hidden of jquery dialog

    How to make circle thing in CSS? [duplicate]

    Keyboard Showed messed up elements' position

    How to use CSS in html table inside javascript

    How to separate Text and HTML with CSS

    How to disable animation in a specific element in CSS

    CSS: How to shadow a field like this? [closed]

    How do I get the codes of creating the sidebar from this website? [closed]