jquery остановить ползунок плагина cycle2

Я хочу остановить ползунок, как только он достигнет последнего изображения. Я использую плагин Cycle2. Если я нажму на изображение, оно перейдет к следующему изображению. Как только последнее изображение отобразится в правом конце окна, «следующее скольжение» будет остановлено. Я попытался рассчитать, чтобы остановить ползунок. Примечание: не следует использовать opts.CarouselVisiblity как статическое значение. Мой код здесь,

<html>
<head>
<style>     
#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;}*/
</style>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.carousel.js"></script>
<script>
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 <= 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<=ww)
        {
            num_of_img++;       
            j+=imgwid;              
        }   
        else
            return false;           
    });
    return num_of_img;
    //});

}   
</script>
</head>
<body>
<div class="hello">
<div id="slideshow">
<div id="cycle-2" class="cycle-slideshow"  data-cycle-slides="> 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">
    <div><img class="cycleimg" id="1" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="2" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="3" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="4" src="http://malsup.github.com/images/beach4.jpg"></div>
    <div><img class="cycleimg" id="5" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="6" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="7" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="8" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="9" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="10" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="11" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="12" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="13" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="14" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="15" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="16" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="17" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="18" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="19" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="20" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="21" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="22" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="23" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="24" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="25" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="26"src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="27" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="28" src="http://malsup.github.com/images/beach4.jpg"></div>
<div><img class="cycleimg" id="29" src="http://malsup.github.com/images/beach1.jpg"></div>
    <div><img class="cycleimg" id="30" src="http://malsup.github.com/images/beach2.jpg"></div>
    <div><img class="cycleimg" id="31" src="http://malsup.github.com/images/beach3.jpg"></div>
    <div><img class="cycleimg" id="32" src="http://malsup.github.com/images/beach4.jpg"></div>
</div>
</div>
</div>
<p>
        <a href="#" id=prev class="cycle-prev">&laquo; prev</a> | <a href="#" id=next class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
<div style="visiblity:hidden !important;" id="pag"></div>
</body>
</html>

Кто-нибудь может сказать решение для этого? Пожалуйста!


jquery jquery-cycle2
person ijarlax    schedule 11.01.2013    source источник
comment
Используйте JSFiddle для такого количества кода.   -  person PHearst    schedule 27.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Использование Cycle2 API. Если текущий слайд соответствует количеству слайдов, то приостановить показ слайдов:

$('#cycle-2').on('cycle-after', function (e, opts, API) {
    if (opts.currSlide === opts.slideCount) {
        $('#cycle-2').cycle('pause');
});
person PHearst    schedule 27.03.2013
comment
Это слишком сложно. API Cycle2 обеспечивает добавление простого атрибута данных в контейнер слайд-шоу. Смотрите ответ Ната. - person Joel Kinzel; 05.09.2014
comment
Если вы работаете над чем-то более сложным (как в этом случае), имеет смысл использовать API напрямую, а не атрибуты данных. - person PHearst; 09.09.2014
comment
Однако API, управляемый данными, позволяет то, о чем просил OP. Так зачем писать лишний JS, если API плагина уже решает вашу проблему? - person Joel Kinzel; 17.09.2014

arrow_upward
1
arrow_downward

В дополнение к ответу PHearst вы можете изменить параметр «цикл данных» на 1. Вот так:

<div id="cycle-2" class="cycle-slideshow" data-cycle-slides="> div" 
    ....
    data-cycle-loop="1" 
>

При значении "-1" слайд-шоу в первую очередь будет непрерывно повторяться. (http://jquery.malsup.com/cycle2/api/)

person Nat Naydenova    schedule 19.02.2014