Menu icon Foundation
Foundation 6 Orbit Deep Linking

I am currently using Foundation 6.2.3 and stumbled upon Foundation 5 Orbit Deep Linking (http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html) which is exactly what I need for the project I am working on currently.   Is there a way to get the F6 slider to do this?  What I'm looking for is four text links above a content slider that will link to a specific slide.  They would function just like bullets (except be on top) but be text links.  I tried to reverse engineer the bullets themselves but did not meet with success. 

The following is my current code which is pretty much right out of the box except for the nav area which is just mocked up to what I'm hoping to achieve (it obviously doesn't work like this right now): 

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="timer:false;">
            <nav class="orbit-nav">
              <button class="is-active" data-slide="0">Button 1</button>
              <button data-slide="1">Button 2</button>
              <button data-slide="2">Button 3</button>
              <button data-slide="3">Button 4</button>
            </nav>
            <ul class="orbit-container">
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">1: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">2: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">3: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">4: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
            </ul>
          </div>

Any help would be greatly appreciated! 

foundation 6Orbitdeep linkingBUTTONS INSTEAD OF BULLETS

I am currently using Foundation 6.2.3 and stumbled upon Foundation 5 Orbit Deep Linking (http://foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html) which is exactly what I need for the project I am working on currently.   Is there a way to get the F6 slider to do this?  What I'm looking for is four text links above a content slider that will link to a specific slide.  They would function just like bullets (except be on top) but be text links.  I tried to reverse engineer the bullets themselves but did not meet with success. 

The following is my current code which is pretty much right out of the box except for the nav area which is just mocked up to what I'm hoping to achieve (it obviously doesn't work like this right now): 

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="timer:false;">
            <nav class="orbit-nav">
              <button class="is-active" data-slide="0">Button 1</button>
              <button data-slide="1">Button 2</button>
              <button data-slide="2">Button 3</button>
              <button data-slide="3">Button 4</button>
            </nav>
            <ul class="orbit-container">
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">1: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">2: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">3: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
              <li class="orbit-slide">
                <div>
                  <h3 class="text-center">4: You can also throw some text in here!</h3>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
                  <h3 class="text-center">This Orbit slider does not use animations.</h3>
                </div>
              </li>
            </ul>
          </div>

Any help would be greatly appreciated! 

Rafi Benkual almost 3 years ago

Hi Laura - that looks how it should work. Are you using this for a product page to display the item that is clicked on?

Laura Coulombe almost 3 years ago

That is what I have on my page and the orbit slider is working as it should except that it is still auto-playing when I want it to be manual only.   The buttons are not having any effect on the slider however.   

I am using this as a accommodations listing.  Basically the user will click on a listing that pops up a modal, inside this modal is a text header then underneath would be the buttons for things like "overview", images and booking.  It will kind of look like tabs but I need it to scroll back and forth between the content. 

This following is basically what I'm trying to accomplish one the user clicks on a particular listing: 

<div class="tiny reveal" id="accomodationModal" data-reveal>
  <!-- Listing Header -->
  <div class="row listHeader">
    <div class="large-12 medium-12 small-12 columns">
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true"><img src="img/CLOSE-LISTINGS.svg" width="22px" height="22px"></span>
      </button>
     <p class="title">LOCATION</p>
     <p>Address and phone number</p>
    </div>
  </div>
  <!-- END Listing Header -->

  <!-- Listing Content -->
  <div class="row collapse">
    <div class="large-12 medium-12 small-12 columns listingContent">
      <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="timer:false;">

        <!-- Orbit Nav -->
        <nav class="orbit-nav">
          <button class="is-active" data-slide="0">Button 1</button>
          <button data-slide="1">Button 2</button>
          <button data-slide="2">Button 3</button>
          <button data-slide="3">Button 4</button>
        </nav>
        <!-- END Orbit Nav -->

        <!-- Slides -->
        <ul class="orbit-container">
          <li class="orbit-slide">
            <div>
              <h3 class="text-center">1: You can also throw some text in here!</h3>
              <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
              <h3 class="text-center">This Orbit slider does not use animations.</h3>
            </div>
          </li>
          <li class="orbit-slide">
            <div>
              <h3 class="text-center">2: You can also throw some text in here!</h3>
              <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
              <h3 class="text-center">This Orbit slider does not use animations.</h3>
            </div>
          </li>
          <li class="orbit-slide">
            <div>
              <h3 class="text-center">3: You can also throw some text in here!</h3>
              <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
              <h3 class="text-center">This Orbit slider does not use animations.</h3>
            </div>
          </li>
          <li class="orbit-slide">
            <div>
              <h3 class="text-center">4: You can also throw some text in here!</h3>
              <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
              <h3 class="text-center">This Orbit slider does not use animations.</h3>
            </div>
          </li>
        </ul>
        <!-- END Slides -->
      </div>
    </div>
  </div>
  <!-- END Listing Content -->
</div>