https://mohamoon-ju.com/CSS/connected-carousels/jcarousel.connected-carousels.js

1(function($) {
2    // This is the connector function.
3    // It connects one item from the navigation carousel to one item from the
4    // stage carousel.
5    // The default behaviour is, to connect items with the same index from both
6    // carousels. This might _not_ work with circular carousels!
7    var connector = function(itemNavigation, carouselStage) {
8        return carouselStage.jcarousel('items').eq(itemNavigation.index());
9    };
10
11    $(function() {
12        // Setup the carousels. Adjust the options for both carousels here.
13        var carouselStage      = $('.carousel-stage').jcarousel();
14        var carouselNavigation = $('.carousel-navigation').jcarousel();
15
16        // We loop through the items of the navigation carousel and set it up
17        // as a control for an item from the stage carousel.
18        carouselNavigation.jcarousel('items').each(function() {
19            var item = $(this);
20
21            // This is where we actually connect to items.
22            var target = connector(item, carouselStage);
23
24            item
25                .on('jcarouselcontrol:active', function() {
26                    carouselNavigation.jcarousel('scrollIntoView', this);
27                    item.addClass('active');
28                })
29                .on('jcarouselcontrol:inactive', function() {
30                    item.removeClass('active');
31                })
32                .jcarouselControl({
33                    target: target,
34                    carousel: carouselStage
35                });
36        });
37
38        // Setup controls for the stage carousel
39        $('.prev-stage')
40            .on('jcarouselcontrol:inactive', function() {
41                $(this).addClass('inactive');
42            })
43            .on('jcarouselcontrol:active', function() {
44                $(this).removeClass('inactive');
45            })
46            .jcarouselControl({
47                target: '-=1'
48            });
49
50        $('.next-stage')
51            .on('jcarouselcontrol:inactive', function() {
52                $(this).addClass('inactive');
53            })
54            .on('jcarouselcontrol:active', function() {
55                $(this).removeClass('inactive');
56            })
57            .jcarouselControl({
58                target: '+=1'
59            });
60
61        // Setup controls for the navigation carousel
62        $('.prev-navigation')
63            .on('jcarouselcontrol:inactive', function() {
64                $(this).addClass('inactive');
65            })
66            .on('jcarouselcontrol:active', function() {
67                $(this).removeClass('inactive');
68            })
69            .jcarouselControl({
70                target: '-=1'
71            });
72
73        $('.next-navigation')
74            .on('jcarouselcontrol:inactive', function() {
75                $(this).addClass('inactive');
76            })
77            .on('jcarouselcontrol:active', function() {
78                $(this).removeClass('inactive');
79            })
80            .jcarouselControl({
81                target: '+=1'
82            });
83    });
84})(jQuery);