Open hayatbiralem opened 8 years ago
Hi,
I want that jcarouselControl and jcarouselPagination can cycle all visible slides on any breakpoint. For example 1 item on phone, 2 items on tablet and 3 items on desktop.
That would be better for this (and focus to target and perPage properties):
// jcarousel.responsive.js (function($) { $(function() { var jcarousel = $('.jcarousel'); var getSlideCount = function(selector){ var width = $(selector).innerWidth(); if(width >= 600) { return 3; } else if (width >= 350) { return 2; } else { return 1; } }; jcarousel .on('jcarousel:reload jcarousel:create', function () { var carousel = $(this); var width = carousel.innerWidth() / getSlideCount(carousel); carousel.jcarousel('items').css('width', Math.ceil(width) + 'px'); }) .jcarousel({ wrap: 'circular' }); $('.jcarousel-control-prev') .jcarouselControl({ target: function(){ return '-=' + getSlideCount(this); } }); $('.jcarousel-control-next') .jcarouselControl({ target: function(){ return '+=' + getSlideCount(this); } }); $('.jcarousel-pagination') .on('jcarouselpagination:active', 'a', function() { $(this).addClass('active'); }) .on('jcarouselpagination:inactive', 'a', function() { $(this).removeClass('active'); }) .on('click', function(e) { e.preventDefault(); }) .jcarouselPagination({ perPage: function(){ return getSlideCount(this); }, item: function(page) { return '<a href="#' + page + '">' + page + '</a>'; } }); }); })(jQuery);
How about that? :)
Yes, that's a good idea. I'm goint to implement that for the next version. 👍
Awesome! Thanks :)
Hi,
I want that jcarouselControl and jcarouselPagination can cycle all visible slides on any breakpoint. For example 1 item on phone, 2 items on tablet and 3 items on desktop.
That would be better for this (and focus to target and perPage properties):
How about that? :)