Menu icon Foundation
Deep link inside Orbit slide

I'm trying to add a link inside an Orbit slide and it's resulting in some weird behavior. Mainly, multiple slides are being set to active. It works if I move the links outside the slide but that defeats the purpose of what I'm trying to accomplish.

Any help would be greatly appreciated.

Here's an example of the markup I have:

<ul data-orbit>
    <li data-orbit-slide="slide-0">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-1">Slide 1</a>
                <br />
                <a data-orbit-link="slide-2">Slide 2</a>
                <br />
                <a data-orbit-link="slide-3">Slide 3</a>
            </div>
        </div>
    </li>
    <li data-orbit-slide="slide-1">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
    <li data-orbit-slide="slide-2">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
    <li data-orbit-slide="slide-3">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
</ul>

            

         

Orbit

I'm trying to add a link inside an Orbit slide and it's resulting in some weird behavior. Mainly, multiple slides are being set to active. It works if I move the links outside the slide but that defeats the purpose of what I'm trying to accomplish.

Any help would be greatly appreciated.

Here's an example of the markup I have:

<ul data-orbit>
    <li data-orbit-slide="slide-0">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-1">Slide 1</a>
                <br />
                <a data-orbit-link="slide-2">Slide 2</a>
                <br />
                <a data-orbit-link="slide-3">Slide 3</a>
            </div>
        </div>
    </li>
    <li data-orbit-slide="slide-1">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
    <li data-orbit-slide="slide-2">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
    <li data-orbit-slide="slide-3">
        <div class="row">
            <div class="small-12 column">
                <a data-orbit-link="slide-0">Back</a>
            </div>
        </div>
        ...
    </li>
</ul>

            

         
Matt Vasquez over 5 years ago

Here's a simple CodePen to demonstrate the functionality:

http://cdpn.io/jAzgn

Justin Patterson over 5 years ago

Anytime you click inside the orbit-container orbit moves to the next slide. This behavior is setup here:

container.on('click', '[data-orbit-slide]', self.link_bullet); 

You should be able to disable this by setting next_on_click to false, but according to this:
http://foundation.zurb.com/forum/posts/2841-orbit-next_on_click-still-not-operational

next_on_click is still not implemented.

to disable next_on_click yourself you can add:

 $('.orbit-container').off('click', '[data-orbit-slide]');

I have modified your example here:
http://codepen.io/anon/pen/Isfgz

Rafi Benkual over 5 years ago

Great answer Justin!

FYI this setting is now merged into master via PR from gkorban. It can be had now by updating to the master branch or it will be in 5.2.2 soon.

Pull Request https://github.com/zurb/foundation/pull/4716