【问题标题】:Call next and prev function of jquery jCarousel?调用jquery jCarousel的next和prev函数?
【发布时间】:2011-09-19 05:28:41
【问题描述】:

我使用 jCarousel 创建滚动内容(关注此http://sorgalla.com/projects/jcarousel/)。但是我不想使用默认的下一个和上一个按钮,所以我想创建 2 个按钮来处理点击事件。例如:我有 2 个这样的超链接:

<script>
jQuery(document).ready(function() {
    // Initialise the first and second carousel by class selector.
    // Note that they use both the same configuration options (none in this case).
    jQuery('#scrollArea').jcarousel({
        scroll: 10
        });
</script>
        <a>NEXT</a>
        <a>PREV</a>
    <div id="scrollArea">
<!-- CONTENT HERE -->
</div>

如何将 next 和 prev 函数绑定到上述链接?

【问题讨论】:

    标签: jquery function click jcarousel next


    【解决方案1】:

    看看这个例子:

    http://sorgalla.com/projects/jcarousel/examples/static_controls.html

    基本上,您可以在轮播的初始化中将函数附加到轮播。这是相关的sn-p。

    function mycarousel_initCallback(carousel) {
        jQuery('#mycarousel-next').bind('click', function() {
            carousel.next();
            return false;
        });
    
        jQuery('#mycarousel-prev').bind('click', function() {
            carousel.prev();
            return false;
        });
    };
    

    【讨论】:

    • 像魅力一样工作。非常感谢。
    【解决方案2】:

    $('.jcarousel-next-vertical').click();

    【讨论】:

      【解决方案3】:

      你也可以这样做

      `$('.jcarousel-next').click(function() {
          $('.jcarousel').jcarousel('scroll', '+=1');
      });`
      

      这里有更多信息:http://sorgalla.com/jcarousel/docs/reference/usage.html

      【讨论】:

        【解决方案4】:

        jQuery:

        jQuery(function ($) {
            $(".jcarousellite-hr").jCarouselLite({
                vertical: false,
                hoverPause: true,
                visible: 4,
                auto: 3000,
                speed: 1000,
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });
        

        html:

        <a class="prev" href="javascript:void(0);">Prev</a>
        <a class="next" href="javascript:void(0);">Next</a>
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2011-09-27
          • 1970-01-01
          • 1970-01-01
          • 2015-10-26
          • 1970-01-01
          • 1970-01-01
          • 2023-01-05
          • 2012-02-02
          相关资源
          最近更新 更多