Foundation Framework Orbit not animating between slides properly

Question

I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.

Only when I try to resize the window, it works as expected.

After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.

Here is my markup for the features slider which I am using orbit for.

<div id="features-wrap" class="wrapper">
            <!-- Insert Features Here -->
            <div id="features-gutter" class="row">
                <section id="features" class="row">
                    <div id="welcome">
                        <div class="eight columns">
                            <h4>Welcome</h4>
                            <p>Hello.</p>
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                    <div id="decorated">
                        <div class="eight columns">
                            <h4>Decorated Apparel</h4>
                            <p>Some Text</p>
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                    <div id="promotional">
                        <div class="eight columns">
                            <h4>Protional Products</h4>
                            <p>Some Text</p>  
                        </div>
                        <div class="four columns">
                            <img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
                        </div>
                    </div>
                </section>
            </div>
            <!-- End Insert Features Here -->
        </div>

end of code Here is also the Javascript I am calling.

var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });

Is there anything I am doing with the code or is it really a bug with the current script for orbit?

Thanks.

Answer 1

found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example: If features controls my orbit slider, then i need to do this:

#features {
    width: <set the width here> !important;
    <any other styles here>
}

Thanks