当前幻灯片上的jcarousel自定义类
我在项目中使用jcarousel，我想知道是否有一种方法可以在当前幻灯片中添加自定义类。 我正在使用jcarousel一次显示更多幻灯片，因为在骨架示例中我可以看到我需要一个当前幻灯片上可用的自定义类，并且当幻灯片被另一个幻灯片替换时它将被删除。
我创造了一个小提琴 ，描绘了我正在制作的场景。
HTML：
-
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.
-
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.
-
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.
-
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.
-
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.
‹ Prev Next › 和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);
我的想法是，我希望以全宽度显示一张幻灯片，并在下一张幻灯片上显示部分，并且活动幻灯片的标题稍微向外移动，以便它覆盖下一张幻灯片的一部分。 问题是，如果我单击下一步，上一张幻灯片的标题仍然可见，这就是为什么我想知道如何将一个类添加到当前完全可见的幻灯片，以便我可以控制其可见性根据当前的幻灯片类别标题。
希望有点清楚我想要实现的目标:)
解决方案非常简单。 目标targetin / targetout成功了。 这是更新的小提琴
$('.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 });