CODEWITHSUNDEEP
jqueryhtmlcssflexslider
Starkers
Starkers

Reputation: 10541

Keep the same number of images inside a dynamic flexslider

you have to help me. I have a deadline in hours, I haven't slept in ages and I'm ripping my hair out here.

Look, here's my current project

css:

    .container {overflow: hidden; width: 100%}
    .flexslider {max-width: 800px; width: 100%; margin: 0 auto}
    .content {background: #f2f2f2; max-width: 800px; display: block; margin: 0 auto}
    .flex-viewport {overflow: hidden !important}

script:

        // flexslider
        $('.flexslider').flexslider({   
            animation: "slide",
            animationLoop: true,
            itemWidth: 410,
            itemMargin: 5,
            minItems: 1,
            maxItems: 1
        });

Basically, on the mobile viewport I want 1 item centered and visible, but on higher viewports I would like 3. I can tweak the parameters above with code when the window changes size. That's not the issue.

The issue is how flexslider falls to pieces when you resize the browser (despite its name). The one hero image I want on display might appear half on half off with another image or not at all. Infuriating, inconsitent results.

Please help, I want one image dead center on lower viewports, and three images dead center on higher viewports.

Upvotes: 1

Views: 146

Answers (2)

Nizam Kazi
Nizam Kazi

Reputation: 1920

In case you are using more than one item:

itemWidth: $('.flexslider').width()/4

Here I am dividing total width of FlexSlider with item count. http://jsfiddle.net/Y3kx5/53/

This may not be best solution, but I believe it will work for you.

Upvotes: 0

Nizam Kazi
Nizam Kazi

Reputation: 1920

Remove

itemWidth: 410,
itemMargin: 5,

from your script and try it.

Upvotes: 1

Related Questions