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?

Answers:

Answer

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.