jcarousel custom class on current slide

问题

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.

The 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>

And the 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 :)

回答1:

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

来源：https://stackoverflow.com/questions/21000589/jcarousel-custom-class-on-current-slide