"target" and "perPage" as function: I think that is a good idea for responsive carousels

[hayatbiralem]

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? :)

[jsor]

Yes, that's a good idea. I'm goint to implement that for the next version. 👍

[hayatbiralem]

Awesome! Thanks :)