CODEWITHSUNDEEP
javascriptcssdrupal-7flexslider
Evaldas Raisutis
Evaldas Raisutis

Reputation: 1638

flexslider responsive carousel problems

I need to create a responsive carousel using flexslider. The problem is that one I shrink the browser window below the size of my container, item positions get messed up.

This is a screenshot of the slider on >1200 screen (fine) enter image description here

This is a screenshot of the slider on >800 screen (!!) enter image description here

My JS init.:

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    touch: true,
    mousewheel: true,
    itemWidth: 400,         
    prevText: "",
    nextText: ""
    });

As you can see in image (2), the third image get chopped off. I want to either reduce the number of visible elements to two when the resolution reaches threshold, and make the images adapt to available space so nothing get chopped off. Ideas?

Upvotes: 4

Views: 18368

Answers (2)

batMask
batMask

Reputation: 744

It's because of itemWidth on your flexslider. You should write mediaquery to make the width flexible on respective devices. And before that add this extra script and try.

// tiny helper function to add breakpoints
var getGridSize = function() {
  return (window.innerWidth < 600) ? 1 :
         (window.innerWidth < 900) ? 2 : 3;
}

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 200,
    itemMargin: 40,
    minItems: getGridSize(), // use function to pull in initial value
    maxItems: getGridSize(), // use function to pull in initial value
    directionNav: true,
    controlNav: false,
    slideshow: false,
});

Upvotes: 5

tomcat
tomcat

Reputation: 353

A bit late, but it looks like this might solve your problem:

http://flexslider.woothemes.com/dynamic-carousel-min-max.html

The min- and max-items settings are set dynamically, based on window width...

A bit messy, but it does work so that no image gets chopped of.

Upvotes: 0

Related Questions