Menu icon Foundation
Orbit Not Working (v5.2.0+)

I'm having a hell of a time getting Orbit to function on anything newer than v5.1.1, and am hoping that someone can be of assistance.

When using v5.1.1 of Orbit, the page loads correctly and works as expected. However, as soon as I try to use a newer version, Orbit stops working properly. When the page loads, I see the first slide, but I can't get it to animate at all (timer and buttons/links do nothing).

My markup is as follows (ignore the Razor code):

<ul data-orbit>
    @{
        for (int i = 0; i < Model.SliderImages.Count; i++)
        {
            <li data-orbit-slide="[email protected]i">
                <img src="@Model.SliderImages[i].Url" alt="@Model.SliderImages[i].Name" />
            </li>
        }
    }
</ul>

<ul class="storefrontRotatorThumbnails">
    @{
        for (int i = 0; i < Model.SliderImages.Count; i++)
        {
            <li><a data-orbit-link="[email protected]"><img src="@Model.SliderImages[i].Url" alt="@Model.SliderImages[i].Name" /></a></li>
        }
    }
</ul>

And the relevant JavaScript looks like this:

$(document).foundation({
    orbit: {
        animation_speed: 1000,
        bullets: false,
        pause_on_hover: false,
        next_on_click: true,
        navigation_arrows:false,
        slide_number: false
    }
}); 

Thoughts?

5.2.05.1.1Orbit5.2.25.2.1

I'm having a hell of a time getting Orbit to function on anything newer than v5.1.1, and am hoping that someone can be of assistance.

When using v5.1.1 of Orbit, the page loads correctly and works as expected. However, as soon as I try to use a newer version, Orbit stops working properly. When the page loads, I see the first slide, but I can't get it to animate at all (timer and buttons/links do nothing).

My markup is as follows (ignore the Razor code):

<ul data-orbit>
    @{
        for (int i = 0; i < Model.SliderImages.Count; i++)
        {
            <li data-orbit-slide="[email protected]">
                <img src="@Model.SliderImages[i].Url" alt="@Model.SliderImages[i].Name" />
            </li>
        }
    }
</ul>

<ul class="storefrontRotatorThumbnails">
    @{
        for (int i = 0; i < Model.SliderImages.Count; i++)
        {
            <li><a data-orbit-link="[email protected]"><img src="@Model.SliderImages[i].Url" alt="@Model.SliderImages[i].Name" /></a></li>
        }
    }
</ul>

And the relevant JavaScript looks like this:

$(document).foundation({
    orbit: {
        animation_speed: 1000,
        bullets: false,
        pause_on_hover: false,
        next_on_click: true,
        navigation_arrows:false,
        slide_number: false
    }
}); 

Thoughts?

Patrick Mccaffrey over 5 years ago

Bump? Anyone?

Wing-Hou Chan over 5 years ago

Hey Patrick!

Is there a site we could take a look at?

Patrick Mccaffrey about 5 years ago

Given the fact that Orbit has been deprecated, and I had nothing but issues with it, we changed all of the site's sliders to Flexslider.

Not exactly a "fix," but at least the site works again...