Question

This is the first post of me , so hope you will sympathetic for me!!

I have a problem with jcarousellite when i bind it dynamically.

My markup look like this:

 <div class=outside1>
<ul>
<li>something here</li>
<li>something here</li>
<li>something here</li>
<li>something here</li>
</ul>
</div>
 <div class=outside2>
<ul>
<li>something here</li>
<li>something here</li>
<li>something here</li>
<li>something here</li>
</ul>
</div>
 <div class=outside3>
<ul>
<li>something here</li>
<li>something here</li>
<li>something here</li>
<li>something here</li>
</ul>
</div>

<div class="nav">
<a class="page1"></a>
<a class="page2"></a>
<a class="page3"></a>
</div>

<script type="text/javascript">  
    jQuery(window).load(function () {        
                jQuery(function () {
                    jQuery("div.outside1").jCarouselLite({                                 
                        mouseWheel: true,
                        //auto: 800,
                        speed: 1000,
                        easing: "easeOutBounce",
                        visible: 7
                    });
           });
jQuery('.page1').click(function () {
        setTimeout(function () {
                jQuery("div.outside1").jCarouselLite({                                    
                        mouseWheel: true,
                        //auto: 800,
                        speed: 1000,
                        easing: "easeOutBounce",
                        visible: 7
                    });                              
            }, 5000);
  });
jQuery('.page2').click(function () {
        setTimeout(function () {
                jQuery("div.outside1").jCarouselLite({                                    
                        mouseWheel: true,
                        //auto: 800,
                        speed: 1000,
                        easing: "easeOutBounce",
                        visible: 7
                    });                              
            }, 5000);
  });
jQuery('.page3').click(function () {
        setTimeout(function () {
                jQuery("div.outside1").jCarouselLite({                                    
                        mouseWheel: true,
                        //auto: 800,
                        speed: 1000,
                        easing: "easeOutBounce",
                        visible: 7
                    });                              
            }, 5000);
  });
    });
    </script>

My problem is when i click on page1 ,page2,page3 to change which div element will bind to jcarousellite but it doesn’t work.
I hope you help me out.Thanks!!

I forget saying this is the plugin that i using:http://www.gmarwaha.com/jquery/jcarousellite/

Answer 1

The plugin isn’t made for multiple instance one one page. But you can try to hide the other ones like this:
http://jsfiddle.net/kannix/B2PfG/1/