Menu icon Foundation
Orbit slide deep links retaining active class

I'm having some issues with the the deep linking feature of the orbit slider.

Everything is working perfectly except for when I click on a button it makes that button active, but doesn't remove the 'active' class from the previous button.

The code looks ok to me and follows the conventions on the foundation orbit docs. Anyone know what could be causing the problem?

<div>
  <ul>
    <li>
      <a data-orbit-link="foo">
        <img src="img/team_placeholder.png" alt="team_placeholder">
      </a>
    </li>
    <li>
      <a data-orbit-link="bar">
        <img src="img/team_placeholder.png" alt="team_placeholder">
      </a>
    </li>
  </ul>
</div>

<ul data-orbit
  data-options="bullets:false;
                slide_number: false;
                timer:false;">
  <li data-orbit-slide="foo">
      <div>
        <h3>
          FOO
        </h3>
      </div>
  </li>
  <li data-orbit-slide="bar">
      <div>
        <h3>
          BAR
        </h3>
      </div>
  </li>
</ul>
            

         

Orbit

I'm having some issues with the the deep linking feature of the orbit slider.

Everything is working perfectly except for when I click on a button it makes that button active, but doesn't remove the 'active' class from the previous button.

The code looks ok to me and follows the conventions on the foundation orbit docs. Anyone know what could be causing the problem?

<div>
  <ul>
    <li>
      <a data-orbit-link="foo">
        <img src="img/team_placeholder.png" alt="team_placeholder">
      </a>
    </li>
    <li>
      <a data-orbit-link="bar">
        <img src="img/team_placeholder.png" alt="team_placeholder">
      </a>
    </li>
  </ul>
</div>

<ul data-orbit
  data-options="bullets:false;
                slide_number: false;
                timer:false;">
  <li data-orbit-slide="foo">
      <div>
        <h3>
          FOO
        </h3>
      </div>
  </li>
  <li data-orbit-slide="bar">
      <div>
        <h3>
          BAR
        </h3>
      </div>
  </li>
</ul>
            

         
S almost 6 years ago

I was having the same issue this morning. I fixed this by doing some searching through the foundation.min.js file. I changed this line

from:
n.parents("ul").find("[data-orbit-link]").removeClass(s.bullets_active_class),n.addClass(s.bullets_active_class)}

to:
n.parents("div").find("[data-orbit-link]").removeClass(s.bullets_active_class),n.addClass(s.bullets_active_class)}

It appears that the code is looking for a "ul" parent to remove the active class on the child. I changed it to "div" (since my deep links were not in a "ul") and it started working for me. In your case maybe change "ul" to "li" and see what happens.

I also came across this https://github.com/Eein/foundation/commit/419daf32c7ea158267d3e1abb288204a61d5d043. I hope one of those fixes it for you.

henry wu almost 6 years ago

Ah thanks will give it a try and let you know if it works! =)

henry wu almost 6 years ago

I looked inside my foundation.min.js and wasn't able to find the line of code that you had in yours.

So I ended up just taking the images out of the unordered list and the active class is now being removed properly.

Briar over 5 years ago

I know this is a late reply, but just struck the same issue myself.
The 'active' class is removed from the 'siblings' - put the 'data-orbit-link' on the li element rather than the a and things will work as desired.