How to use multiple jcarousel in one page?

Question

I trying to use JCarousel in my page, below is the HTML I used for multiple JCarousel:

<div class="col-md-12 jcarousel-wrapper">
    <div id="jc1" class="jcarousel">
        <ul>
            <li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
            <li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
            <li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
            <li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
            <li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
            <li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>
<div class="col-md-12 jcarousel-wrapper">
    <div id="jc2" class="jcarousel">
        <ul>
            <li><img src="images_offer/dest_01.jpg" alt="Image 1"></li>
            <li><img src="images_offer/dest_02.jpg" alt="Image 2"></li>
            <li><img src="images_offer/dest_03.jpg" alt="Image 3"></li>
            <li><img src="images_offer/dest_04.jpg" alt="Image 4"></li>
            <li><img src="images_offer/dest_05.jpg" alt="Image 5"></li>
            <li><img src="images_offer/dest_06.jpg" alt="Image 6"></li>
        </ul>
    </div>
    <a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>
</div>

This is the JQuery I use in the same page:

(function($) {
    $(function() {
        var jcarousel= $('.jcarousel');

        jcarousel.on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel.innerWidth();

            if (width >= 600) {
                width = width / 3;
            } else if (width >= 350) {
                width = width / 2;
            }

            jcarousel.jcarousel('items').css('width', width + 'px');
        })



        $('.jcarousel').jcarousel({
                wrap: 'circular'
        });


        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselCo ntrol({
                target: '+=1'
            });
    });
})(jQuery);

Here the problem id='jc1' is working fine with the JQuery width, but id='jc2' is working, but not setting the width why?

Answer 1

Script for second slider

 $(function() {
        $('#second .jcarousel').jcarousel();

        $('#second .jcarousel-control-prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('#second .jcarousel-control-next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        $('#second .jcarousel-pagination')
            .on('jcarouselpagination:active', 'a', function() {
                $(this).addClass('active');
            })
            .on('jcarouselpagination:inactive', 'a', function() {
                $(this).removeClass('active');
            })
            .jcarouselPagination();
    });

HTML for second slider with second id

<div class="jcarousel-wrapper" id="second">
    // second slider
</div>