EasySlider 1.7 not showing my last image.

Question

Hello,

Using easySlider 1.7 I've got it all configured how I'd like it but the last image of my 3 shows up then disappears. Then it loops the 2 images again.

The other 2 hang around for 5 seconds then the 3rd moves in and it gets swallowed up.

This is my easySlider code:

 $.fn.easySlider = function(options){

// default configuration properties var defaults = {
prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next', controlsShow: false, controlsBefore: '', controlsAfter: '', controlsFade: true, firstId: 'firstBtn', firstText: 'First', firstShow: false, lastId: 'lastBtn', lastText: 'Last', lastShow: false,
vertical: false, speed: 800, auto: false, pause: 5000, continuous: true, numeric: false, numericId: 'controls' };

This is my

    <div style="position:absolute; left:457px; top:598px; width:468px; height:331px; overflow: hidden;" id="slider"">
          <ul style="width: 1404px; margin-left:0px;">
            <li style="margin-left: 457px; float: left;"><img src="../stewart/studies/1_invest/invest_01.png"></li>    
      <li style="margin-left: 11px;"><img src="../stewart/studies/1_invest/invest_02.jpg"></li>
   <li style="margin-left: 0px;"><img src="../stewart/studies/1_invest/invest_03.jpg"></li>
    </ul>
</div>

Any ideas? I'm a designer and code isn't my strong point.

Cheers!

Answer 1

First thing is that you should remove margin-left you have provided to indivadual li. The margin-left is automatically provided by plugin when you slide.

Second thing is that the width provided to the <div id="slider"> should be equal to the width of images you want to slide (i am assuming that the width of all the images you want to slide are the same.)

Last thing include float:left to each of the div's, not just the first one.

Just try the above things and see if it work's properly.

If still it gived issues provide me the link of the page if you can so i can help you out.