jquery目标特定的旋转木马幻灯片

Question

嗨我正在尝试使用jquery在旋转木马滑块序列中显示LAST幻灯片时触发一些代码...到目前为止，我尝试过的所有javascript / jquery如hasClass（）都能正常工作，但是当它是最后一次而不是滑入它的周期...谢谢你的帮助

$('#carousel1').on('slid.bs.carousel', function () {
    if ( $( "div.item" ).hasClass( "active" )) {
        console.log("SMELLO SMOLRLD");
    }
});

        

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel1" data-slide-to="0" class="active">
            </li>
            <li data-target="#carousel1" data-slide-to="1"></li>
            <li data-target="#carousel1" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner z-depth-2" role="listbox">

            <!-- First slide -->
            <div class="item active">
                <div class="view overlay hm-blue-slight">
                    <a><img src="http://mdbootstrap.com/images/slides/slide%20(7).jpg" class="img-responsive" alt="slide1">
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                    <div class="carousel-caption hidden-xs">
                        <div class="animated fadeInDown">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.item -->

            <!-- Second slide -->
            <div class="item">
                <div class="view overlay hm-blue-slight">
                    <a><img src="http://mdbootstrap.com/images/slides/slide%20(23).jpg" class="img-responsive" alt="slide2">
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                    <div class="carousel-caption hidden-xs">
                        <div class="animated fadeInDown">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.item -->

            <!-- Third slide -->
            <div class="item">
                <div class="view overlay hm-blue-slight">
                    <a><img src="http://mdbootstrap.com/images/slides/slide%20(2).jpg" class="img-responsive" alt="slide3">
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                    <div class="carousel-caption hidden-xs">
                        <div class="animated fadeInDown">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.item -->

        </div>
        <!-- /.carousel-inner -->

        <!-- Controls -->
        <a class="left carousel-control new-control" href="#carousel1" role="button" data-slide="prev">
            <span class="fa fa fa-angle-left waves-effect waves-light"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control new-control" href="#carousel1" role="button" data-slide="next">
            <span class="fa fa fa-angle-right waves-effect waves-light"></span>
            <span class="sr-only">Previous</span>
        </a>

    </div>
    <!-- /.carousel -->