jquery stop the cycle2 plugin slider
<p>I want to stop the slider once it reaches the last image. I using cycle2 plugin. If i click the image it will slide next images. Once the last image is showing in the right end of the window, then it will be stop the 'next sliding'. I tried some calculation to stop the slider. 
Note: sholud not use opts.CarouselVisiblity as static value. 
My code is here,</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;     
#cycle-2 .cycle-slide { border:3px solid #fff; }
#cycle-2 .cycle-slide-active { border:3px solid #004; }
#slideshow{width: 100%;max-width:100%;margin: auto}
.cycleimg{width:auto;height:60px;}
.cycle-slideshow img {height: 60px; display: block; }
.cycle-pager-active{visibility:hidden !important;}
/*.addleft{left:-792px!important;}*/
&lt;/style&gt;
&lt;script type="text/javascript" src="jquery-1.7.min.js"&gt;&lt;/script&gt;
&lt;script src="http://malsup.github.com/jquery.cycle2.js"&gt;&lt;/script&gt;
&lt;script src="http://malsup.github.com/jquery.cycle2.carousel.js"&gt;&lt;/script&gt;
&lt;script&gt;
jQuery(document).ready(function(){
             winlastimg=calc_func();
             //alert(winlastimg);
            $(window).load(function()
             {              
        var winlastimg; 
        winlastimg=calc_func(); 
        //alert(winlastimg);
    });
    $('.cycle-slideshow').cycle('stop');
    var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
        slideshows.not(this).cycle('goto', opts.currSlide);         
    });
           var behindcount=0;
    var prevativeimgcount=0;
    $('#cycle-2 .cycle-slide').click(function(){
        var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
        var activeid=$(".cycle-slide-active").find('img').attr("id");
        var lastid=$(".cycle-slideshow div").find("img:last").attr("id");
        var firstid=$(".cycle-slideshow img").first().attr("id");
            var t=calc_func();
                    var activewinimcount=t+index;
                var lastimgindex=$(".cycle-slideshow div img").length-1;
                if(activewinimcount &lt;= lastimgindex)
                {       
                    prevativeimgcount=activewinimcount
                    behindcount=lastimgindex-activewinimcount;
                    slideshows.cycle('goto', index);                        
                }                                       
                else
                {
                    //alert(prevativeimgcount);
                    //var i1=prevativeimgcount+behindcount;
                    //alert(i1);
                    //slideshows.cycle('goto', index); 
                    var i1=lastimgindex-index;
                    $('.cycle-slideshow').cycle('goto',i1);
                    //alert(i1);
                    //$(".cycle-carousel-wrap").stop();
                }
    });          
}); 
function calc_func()
{
    var l=0;    
    var num_of_img=1;   
    var imgwid=0;
    var ww=$(window).width();
    //$('.cycle-slideshow img').load(function(){
    $('.cycle-slideshow').find('img').each(function() {
        imgwid =imgwid + $(this).width()+10;
        var j=imgwid;           
        if(j&lt;=ww)
        {
            num_of_img++;       
            j+=imgwid;              
        }   
        else
            return false;           
    });
    return num_of_img;
    //});

}   
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="hello"&gt;
&lt;div id="slideshow"&gt;
&lt;div id="cycle-2" class="cycle-slideshow"  data-cycle-slides="&gt; div" data-cycle-timeout="0"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
data-cycle-pager="#pag"
    data-cycle-caption=".custom-caption"
    data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}}"
    data-cycle-fx="carousel"
    data-cycle-carousel-fluid="true"
data-cycle-log="false"
 data-cycle-pause-on-hover="true"
data-cycle-loop="-1"
    data-cycle-allow-wrap="false"&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="1" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="2" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="3" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="4" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="5" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="6" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="7" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="8" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="9" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="10" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="11" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="12" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="13" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="14" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="15" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="16" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="17" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="18" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="19" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="20" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="21" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="22" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="23" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="24" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="25" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="26"src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="27" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="28" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class="cycleimg" id="29" src="http://malsup.github.com/images/beach1.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="30" src="http://malsup.github.com/images/beach2.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="31" src="http://malsup.github.com/images/beach3.jpg"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="cycleimg" id="32" src="http://malsup.github.com/images/beach4.jpg"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;
        &lt;a href="#" id=prev class="cycle-prev"&gt;&amp;laquo; prev&lt;/a&gt; | &lt;a href="#" id=next class="cycle-next"&gt;next &amp;raquo;&lt;/a&gt;
        &lt;span class="custom-caption"&gt;&lt;/span&gt;
    &lt;/p&gt;
&lt;div style="visiblity:hidden !important;" id="pag"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Any one can tell the solution for this? Please!</p>
