Search code examples
jquerycycle

jquery cycle gap because of image widths

I am using jquery cycle to shuffle some images around. I have div containers floating left so they are side by side. There is a gap showing between the center div and the right div which i believe is because the first image is 100px wide and the second one is 200px wide. Is there a way to make the container adjust to the width of the image that is showing so there is no gap?

Solution

  • This worked for me:

    JS

    /* Cycle plugin fit width */
$('#slider1 ul').cycle({
    fx:     'scrollLeft',
    easing: 'easeOutBack',


    nowrap:  0 ,
    delay:  -2200,
    before: function(curr, next, option){

           var w = curr.style.width;
           $('#slider1 ul').css({'width': w});

    }
});

    HTML

    <div id="slider1" style="float:left;width:auto;margin:0">
<ul  style="width: 150px; margin:0; padding:0">
<li style="width: 200px"><img src="shuff/1.jpg" height="165" width="150"  /></li>
<li style="width: 150px"><img src="shuff/2.jpg" height="165" width="200" /></li>
</ul>
</div>