How to apply jquery for particular class
<p>I am showing images in list with having next and previous button.</p>

<p>I have use this jquery in for loop so that it can more than one.</p>

<pre><code>list1:

Prev &lt;ul&gt;&lt;li&gt; img1 img2 img3....&lt;/li&gt;&lt;/ul&gt; Next

list2:

Prev &lt;ul&gt;&lt;li&gt; img1 img2 img3....&lt;/li&gt;&lt;/ul&gt; Next
</code></pre>

<p>if i have three different image list on same page if i click on next Or prev of 1st list then its apply  for all list. </p>

<p>how can i apply it for that particular list to move Next and prev. </p>

<p>I have used the code from ths link:<a href="http://css-plus.com/2010/09/create-your-own-jquery-image-slider/" rel="nofollow">http://css-plus.com/2010/09/create-your-own-jquery-image-slider/</a></p>

<p>i have used folloeing code:
    Jquery:</p>

<pre><code>$(document).ready(function(){ 

    // Gallery
    if(jQuery(".gallery").length){

        // Declare variables
        var totalImages = jQuery(".gallery &gt; li").length, 
            imageWidth = jQuery(".gallery &gt; li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery(".gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery(".gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function(){
            if(jQuery(".gallery").position().left &lt; 0 &amp;&amp; !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function(){
            if(jQuery(".gallery").position().left &gt; stopPosition &amp;&amp; !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});




 Html and php:
    &lt;?php foreach($records as $row) :?&gt;

     &lt;div id="gallery-wrap"&gt;
        &lt;ul id="gallery" class="gallery"&gt;
                &lt;?php foreach($row['images'] as $image) :?&gt; 
                 &lt;li&gt; 
                    &lt;a href="#"&gt;&lt;img src="&lt;?php echo base_url();?&gt;uploads/&lt;?php echo $image['img']; ?&gt; /&gt;&lt;/a&gt;
                &lt;/li&gt; 
                &lt;?php endforeach ;?&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
       &lt;div id="gallery-controls" class="gallery-controls"&gt;
        &lt;a href="#" id="gallery-prev" &gt;Prev&lt;/a&gt;
        &lt;a href="#" id="gallery-next" &gt;Next&lt;/a&gt;
    &lt;/div&gt;
    &lt;?php endforeach ;?&gt;
</code></pre>
