2

「li.item:first」または「li.item:last」に「active」クラスがある場合、前/次のコントローラーを非表示にするにはどうすればよいですか

<ul class="carousel">
    <li class="item active"><img src="ab.jpg" /></li>
    <li class="item"><img src="cd.jpg" /></li>
    <li class="item"><img src="ef.jpg" /></li>
    <li class="item"><img src="gh.jpg" /></li>
</ul>

<!-- Controls -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="icon-next"></span>
</a>
4

6 に答える 6

4

あなたはこのようにすることができます：

$(".right").click(function() {
  if($(".active").is(":last-child"))
  {
    $(this).hide();
    $(".left").show();
  }
}

そして、「前の」コントロールの反対（左と右を交換）。

于 2013-09-07T12:28:27.023 に答える
1

ここでの優れた回答は代替ソリューションです。上記のコードを少し変更して重複を削除します。

フィドルのデモ

CSS

.carousel .item
{
    display: none;
}
.carousel .item.active
{
    display: block;
}

jquery

$(function()
 {
    $('.carousel-control').click(function(event) 
    {
        event.preventDefault();

        var $this               = $(this)
        var direction           = $this.data('slide');
        var $items              = $('.carousel .item');
        var $activeItem         = $items.filter('.active');
        var $nextItem           = $activeItem[direction]();
        var hasItem             = $nextItem.length !== 0;
        var shouldHideControl   = $nextItem.is(':first-child') || $nextItem.is(':last-child');
        var $controls           = $('.carousel-control');

        $controls.show()

        if(hasItem)
        {
           $items.removeClass('active');
           $nextItem.addClass('active');
        }

        if(shouldHideControl)
        {
            $this.hide();
        }

    }); 
});
于 2013-09-07T13:55:14.027 に答える
1 
if $('li.item:first').hasClass('active') { $('a.left.carousel-control').toggle(); }
if $('li.item:last').hasClass('active') { $('a.right.carousel-control').toggle(); }

完全な解決策ではありませんが、開始する必要があります。クリック ハンドラーでそれらを操作するだけです。

于 2013-09-07T12:34:59.927 に答える
0

アクティブなクラスが変わるたびに、つまりカルーセルがスライドするたびに、これを行う必要があります。

// Show both by default
$(".left, .right").show();
// If the first is selected, hide the left
if($("li.item:first").hasClass("active")) $(".left").hide();
// If the last is selected, hide the right
if($("li.item:last").hasClass("active")) $(".right").hide();
于 2013-09-07T12:28:29.837 に答える