Tiny Carousel 插件，在最后一张幻灯片自动停止

2022-01-24 00:00:00 slider jquery javascript

我正在使用用于图像滑块的 tinycarousel jquery 插件，我想在到达最后一张幻灯片时自动暂停，我对 jquery 或 javascript 完全陌生 如果您能帮助我实现，那就太好了这个功能的家伙.提前致谢.

I'm working with tinycarousel jquery plugin for an image slider, I would like to pause automatically at reaching the last of the slides, I'm totally new to jquery or javascript It would be great if you can help me to achieve this functionality guys. Thanks in advance.

HTML:

<div id="slider-main">
    <a class="buttons prev" href="#">left</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/image1.jpg" /></li>
            <li><img src="images/image2.jpg" /></li>    
            <li><img src="images/image3.jpg /></li>
            <li><img src="images/image4.jpg" /></li>                                    
            <li><img src="images/image5.jpg" /></li>    
        </ul>
    </div>
    <a class="buttons next" href="#">right</a>
        <ul class="pager">
            <li><a rel="0" class="pagenum" href="#">1</a></li>
            <li><a rel="1" class="pagenum" href="#">2</a></li>
            <li><a rel="2" class="pagenum" href="#">3</a></li>
            <li><a rel="3" class="pagenum" href="#">4</a></li>
            <li><a rel="4" class="pagenum" href="#">5</a></li>      
       </ul>
</div>

JSCRIPT

<script type="text/javascript" src="lib/js/iepngfix_tilebg.js"></script>
<script type="text/javascript" src="lib/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#slider-main').tinycarousel({ pager: true, interval: true, intervaltime: 1000, duration:500 });

        $('#slider-products').tinycarousel({ display: 3 });

        $('#slider-main').tinycarousel({
            callback: function(element, index){
                if (index == 4) {
                    $('#slider-main').tinycarousel_stop();
                }
            }
        });                         
    });     
</script>

推荐答案

您可以通过回调函数停止轮播.在上面的例子中，你可以这样做:

You could stop the carousel from a callback function. In the above example, you could do:

$('#slider-main').tinycarousel({
    callback: function(element, index){
        if (index == 4) {
          $('#slider-main').tinycarousel_stop();
        }
    }
});

相关文章