jquery - 当前幻灯片上的 jcarousel 自定义类

Question

我在项目中使用jcarousel，我想知道是否有办法向当前幻灯片添加自定义类。我正在使用 jcarousel 一次显示更多幻灯片，如 skeleton example 中所示。我需要当前幻灯片上可用的自定义类，当幻灯片被另一张幻灯片替换时，它会被删除。

我创建了一个fiddle这描述了我正在研究的场景。

HTML:

<div class="jcarousel-wrapper">

                <!-- Carousel -->
                <div class="jcarousel">
                    <ul>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>11111 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>22222 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>33333 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>44444 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                        <li>
                            <img src="http://lorempixel.com/400/200" width="400" height="200" alt="" />
                            <div class="jcarousel-caption">
                                <p>55555 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui elit, feugiat vel augue ornare, scelerisque aliquam diam. Maecenas in velit quis nisl consequat ullamcorper. Ut at erat in nulla auctor pellentesque.</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- Prev/next controls -->
                <a href="#" class="jcarousel-control-prev">&lsaquo; Prev</a>
                <a href="#" class="jcarousel-control-next">Next &rsaquo;</a>

            </div>

还有 JS:

(function($) {
    $(function() {
        /*
        Carousel initialization
        */
        $('.jcarousel')
            .jcarousel({
                // Options go here
            });

        /*
         Prev control initialization
         */
        $('.jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '-=1'
            });

        /*
         Next control initialization
         */
        $('.jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '+=1'
            });
    });
})(jQuery);

我的想法是，我想以全角显示一张幻灯片，并在下一张幻灯片上显示部分内容，并且事件幻灯片的标题稍微移出一点，以便覆盖下一张幻灯片的一部分。问题是，如果我单击下一步，上一张幻灯片的标题仍然可见，这就是为什么我想知道如何向当前完全可见的幻灯片添加一个类，以便我可以控制上一张幻灯片的可见性根据当前幻灯片类别的标题。

希望我能清楚地了解我想要实现的目标:)

Answer 1

解决方案非常简单。事件 targetin/targetout 就达到了目的。这是更新后的fiddle

$('.jcarousel')
            // Bind _before_ carousel initialization
            .on('jcarousel:targetin', 'li', function() {
                $(this).addClass('target');
            })
            .on('jcarousel:targetout', 'li', function() {
                $(this).removeClass('target');
            })
            .jcarousel({
                // Options go here
            });