flexslider responsive carousel problems

Question

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)

This is a screenshot of the slider on >800 screen (!!)

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?

Answer 1

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,
});