jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 734 forks source link

Responsive Carousel: Adjust jcarouselControl, jcarouselPagination & $(".jcarousel").swipe According to Width #768

Closed jamesefl closed 9 years ago

jamesefl commented 9 years ago

Hi Thank you for a great Carousel program, I've started working with jcarousel.responsive.js version 0.3. I've managed to adjust the number of visible items in the Carousel dependent on the carousels' width:

(function($) {  
$(function() {
    var jcarousel = $('.jcarousel');
    var wide4=830;
    var wide3=639;
    var wide2=360;

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

            if (width >= wide4) {
                width = width / 4;                  
            } else if (width >= wide3) {
                width = width / 3;
            } else if (width >= wide2) {
                width = width / 2;
            } 

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

But am now struggling to adjust the jcarousel-control-prev / next & jcarouselPagination to match the visible items, I've also implemented touchSwipe and would like that to scroll to the appropriate page/items too. e.g.

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

would become something like:

   $('.jcarousel-control-prev')
        if (width >= wide4) {
                target: '-=4'               
            } else if (width >= wide3) {
                target: '-=3'
            } else if (width >= wide2) {
                target: '-=2'
            }           
        });

I've tried a few things and can't get any of them to work. I've done a jsfiddle: http://jsfiddle.net/James2015/u303bap9/3/

Thank you James

jsor commented 9 years ago

I've updated the jsfiddle. Let me know if you have any questions regarding the changes.

jamesefl commented 9 years ago

Excellent thank you, just what I was looking for. I'd like to make a donation do you have a facility for that?

jsor commented 9 years ago

Thanks, but that isn't necessary :) Glad you find jCarousel useful.