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>

Answer 2

I have found a solution.

Replace

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

with

jcarousel.jcarousel('items').css('width', width + 'px');    
var element_width = $("#jc1 li").width();               
$("#jc2 li").each(function(){                   
    $(this).css("width",element_width);                                 
});

Thanks,

Puspendu

Answer 3

Instead of duplicating the whole function, you may just play with little thing like below;

jQuery script to call the function:

<script type="text/javascript">
$(function() {
    //Initiate slider-one
    $('.slider-one .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 1000,
            target: '+=1',
            autostart: true
        });

    //Initiate slider-two
    $('.slider-two .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 500,
            target: '+=1',
            autostart: true
        });

    //Initiate slider-three
    $('.slider-three .jcarousel')
        .jcarousel({
            // Core configuration goes here
        })
        .jcarouselAutoscroll({
            interval: 500,
            target: '+=1',
            autostart: true
        });
});
</script>

HTML:

<!-- slider-one BEGINS -->
<div class="banner slider-one"> 
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-one ENDS -->

<!-- slider-two BEGINS -->
<div class="banner slider-two"> 
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-two ENDS -->

<!-- slider-three BEGINS -->
<div class="banner slider-three">   
    <div class="jcarousel-wrapper">
        <div class="jcarousel">
            <ul>
                <li><img src="images/banner1.png"></li>
                <li><img src="images/banner2.png"></li>
                <li><img src="images/banner3.png"></li>
             </ul>
        </div>
        <a href="#" class="jcarousel-control-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
        <a href="#" class="jcarousel-control-next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
        <p class="jcarousel-pagination"></p>
    </div>
</div>
<!-- slider-three ENDS -->