Question

我正在使用jQuery循环插件来循环容器中的多个div。一切都运行良好我想添加的唯一功能，我似乎无法在插件中找到一个选项，如果容器中只有一个幻灯片，则隐藏两个按钮的能力。我目前的代码是：

    //Goal summary page cycler
    $('#showGoal').after('<div id="nav">')
                .cycle({
                    fx: 'scrollHorz',
                    speed:300,
                    prev: '#goalPrev',
                    next: '#goalNext',
                    timeout: 0,
                    pager: '#nav',                        
                    after: onAfter, 
                    pagerAnchorBuilder: function(idx, slide) {
                        return'<a href="#"></a>';
                    }
                });

            // call back to remove buttons on first and last slide / adjust height of container
            function onAfter(curr, next, opts, fwd) {
                var index = opts.currSlide;
                $('#goalPrev')[index == 0 ? 'hide' : 'show']();
                $('#goalNext')[index == opts.slideCount - 1 ? 'hide' : 'show']();

                //get the height of the current slide
                var $ht = $(this).height();
                //animates the container's height to that of the current slide 
                $(this).parent().animate({ height: $ht });
            }

我猜我可以检查索引并以这种方式删除它们，或者可能在if语句的行中执行某些操作（伪代码）：

    var index = this.index();
    var numOfSlides = 0;

    if ( numOfSlide < index ) {
       //hide the buttons 
   }
   else
   {
       //show the buttons
   }

感谢您提供任何可能的帮助！

Answer 1

插件作者推荐的方法是使用Javascript隐藏按钮：

http://forum.jquery.com/topic/cycle-plugin-hide-prev-next

Answer 2

不应该已经有效吗？如果您只有一张幻灯片，则onAfter功能应该处理它。使用一张幻灯片，您的索引始终为0.您的opts.slideCount - 1也将为零，因为您将有一张幻灯片减一。

编辑：

但如下所述，onAfter可能需要在页面加载后调用，因为在处理一个幻灯片时，该函数可能无法被调用。

Answer 3

问题解决了，我觉得自己像是一个想念它的白痴，你最初必须将箭头的显示设置为无。

如果只有一张幻灯片，jQuery Cycle会隐藏上一个/下一个导航。

3 个答案: