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

解决方案非常简单。针对/目标的事件起到了作用。这是更新的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
            });

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

1 个答案: