search

woocommerce / FlexSlider

An awesome, fully responsive jQuery slider plugin
http://www.woocommerce.com/flexslider/
GNU General Public License v2.0
4.91k stars 1.69k forks source link

Having Trouble Resizing Two Instances of Flexslider on One Page #1684

Closed moraitis closed 7 years ago

moraitis commented 7 years ago

My goal is to have two flexslider instances on one page.

I am running into a problem where resizing the window is not causing the flexslider instances to be responsive and resize with the window. In this example you can see the instance on the left partially resizing and the instance on the right not resizing at all: https://moraitisdesign.com/happyjournalhappylife/lookinside/lead-pages-two-items-v2.html

I think I have the set-up right, but I am unsure how to bring back the responsive resizing that I could achieve with one instance.

Here is the HTML:

    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <div id="loadbgone">
                <div id="containerone" class="flexslider lookinsideslide">
                    <ul id="slidesone" class="slides">
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0000_1.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0000_1.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0001_2.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0001_2.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0002_3.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0002_3.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0003_4.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0003_4.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0004_5.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0004_5.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0005_6.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0005_6.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0006_7.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0006_7.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0007_8.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0007_8.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0008_9.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0008_9.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0009_10.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0009_10.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0010_11.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0010_11.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0011_12.png" data-lightbox="lookinside" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/lookinside/images/look-inside_0011_12.png" /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="column" style="background-color:#bbb;">
            <div id="loadbgtwo">
                <div id="containertwo" class="flexslider whatpeoplesayslide">
                    <ul id="slidestwo" class="slides">
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0000_reviews-lc-twyla.png" data-lightbox="what-readers-are-saying" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0000_reviews-lc-twyla.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0001_reviews-christy-kate.png" data-lightbox="what-readers-are-saying" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0001_reviews-christy-kate.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0003_reviews-reynolds-crystal.png" data-lightbox="what-readers-are-saying" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0003_reviews-reynolds-crystal.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0004_reviews-lele-skiPatrol.png" data-lightbox="what-readers-are-saying" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0004_reviews-lele-skiPatrol.png" /></a>
                        </li>
                        <li>
                            <a href="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0005_reviews-customer-landers.png" data-lightbox="what-readers-are-saying" data-title=""><img src="https://moraitisdesign.com/happyjournalhappylife/what-readers-are-saying/images/amazon_0005_reviews-customer-landers.png" /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Here is the javascript:

<script type="text/javascript">
        $(window).load(function () {
            $('.flexslider.lookinsideslide').flexslider({
                selector: "#slidesone > li",
                animation: "fade",
                useCSS: false,
                animationLoop: true,
                smoothHeight: true,
                direction: "horizontal",
                pauseOnHover: true,
                pauseOnAction: true,
                touch: true,
                start: function (slider) {
                    $('#loadbgone').removeAttr( "id" );
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(window).load(function () {
            $('.flexslider.whatpeoplesayslide').flexslider({
                selector: "#slidestwo > li",
                animation: "slide",
                useCSS: false,
                animationLoop: true,
                smoothHeight: true,
                direction: "horizontal",
                pauseOnHover: true,
                pauseOnAction: true,
                touch: true,
                start: function (slider) {
                    $('#loadbgtwo').removeAttr( "id" );
                }
            });
        });
    </script>
moraitis commented 7 years ago

I discovered that the vertical responsive resizing is caused primarily by the animation attribute, but also has trouble with the paging indicators if smoothHeight is set to true.

animation: "slide",
smoothHeight: true,

If the animation attribute is set to fade, and the smoothHeight is set to false, then both instances resize as desired:

animation: "fade",
smoothHeight: false,

Here is the example with everything working as expected: https://moraitisdesign.com/happyjournalhappylife/lookinside/lead-pages-two-items-v5.html

And here is the final result on my Leadpages landing page: https://happyjournalhappylife.com