当前幻灯片上的jcarousel自定义类 [英] jcarousel custom class on current slide

问题描述

我正在项目中使用jcarousel，我想知道是否可以将自定义类添加到当前幻灯片中. 我正在使用jcarousel一次显示更多幻灯片，可以在骨架示例中看到 我需要一个自定义类，该类在当前幻灯片上可用，随着幻灯片被另一个替换，该类将被删除.

I am using jcarousel in a project and I would like to know if there is a way to add a custom class to the current slide. I am using jcarousel to display more slides at once, as it can be seen in the skeleton example I need a custom class that is available on the current slide, and it is removed as the slide is replaced by another.

我创建了一个小提琴，它描述了我正在研究的场景.

I have created a fiddle that depicts the scenario I am working on.

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);

这个想法是我想全幅显示一张幻灯片，部分显示在下一张幻灯片上，活动幻灯片的标题移出一点，以便覆盖下一张幻灯片的一部分. 问题是，如果单击下一步，则仍可以看到上一张幻灯片的标题，这就是为什么我想知道如何为当前完全可见的幻灯片添加一个类，以便可以控制该幻灯片的可见性根据当前幻灯片类别的标题.

The idea is that I want to display one slide in full width, and part on the next slide, and the caption of the active slide is shifted out a bit so that it covers part of the next slide. The problem is that, if I click next, the caption of the previous slide is still visible, this is why I would like to know how can I add a class to the current fully visible slide, so that I can control the visibility of the caption according to the current slide class.

希望我能达到的目标很明确:)

Hope it is kind of clear what I am trying to achieve :)

推荐答案

解决方案非常简单. targetin/targetout事件可以解决问题. 这是更新的小提琴

The solution was pretty simple. The events targetin/targetout did the trick. Here is the updated 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自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！