user3396033 user3396033 - 3 months ago 13
jQuery Question

How to use multiple jcarousel in one page?

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

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>