More dynamic responsive carousel

[HunterJoe]

I love your cycle and cycle2 plugins. I have incorporated them both into our custom CMS and use them all the time. However, I am in the process of rebuilding our company website, and I need a responsive carousel. So naturally I turned to cycle2.

However I did some looking around the net, and did find a nice feature that I would love to have in cycle2 that is included in this plugin (http://bxslider.com/examples/carousel-dynamic-number-slides). It allows for a setting to change the number of visible slides based on screen width. So for desktop I can have 4 slides visible, for tablet I would 2 or 3, and for phone sizes I would have only one slide showing at a time.

While I love the responsiveness of cycle2, simply shrinking the image sizes in the carousel is not really ideal on a phone, as it makes the carousel really tiny. Having the ability to adjust the number of visible slides would be ideal. For now I am simply using a resize method to check the window width and, using jquery adjust the data-cycle-carousel-visible and data-cycle-carousel-offset attributes, then calling reinit. It works, but it causes the slideshow to flash repeatedly on window resize and looks pretty horrible.

[Adrian-Filip]

Hi @HunterJoe , did you find any solution to this?

[mcfarlandonline]

Hi there,

The code below seemed to have some effect on the slideshow. I still had to include the data- attributes within the original .cycle-slideshow carousel container, but upon resizing and refresh, the attributes were manipulated.

Customizing from here ended up being too hairy for me and I went another route, but it might be a start.

// In mobile, change number of slides visble in cycle-slideshow carousel $(function() { var width = $(window).width(); if (width <= 760) { $('.cycle-slideshow').attr('data-cycle-carousel-visible', '1'); $('.cycle-slideshow').attr('data-cycle-carousel-fluid', 'false'); } else { $('.cycle-slideshow').attr('data-cycle-carousel-visible', '3'); $('.cycle-slideshow').attr('data-cycle-carousel-fluid', 'true'); } });