Tiny Carousel plugin, autostop at last slide

拥有回忆 提交于 2019-12-13 04:29:30

问题


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>

回答1:


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();
        }
    }
});


来源:https://stackoverflow.com/questions/16926939/tiny-carousel-plugin-autostop-at-last-slide

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!