Menu icon Foundation
F6 Orbit Slider data-options attr not working

Hello,

how I can use "data-options" for orbit slider? Method like F5 not working :(

Thanks.

Orbitdata-options

Hello,

how I can use "data-options" for orbit slider? Method like F5 not working :(

Thanks.

Rafi Benkual about 4 years ago

Are you asking about Foundation 6? Data-options are on the roadmap for a later version.

Brian Richardson about 4 years ago

I am having the same issue, slider works fine but when I try to add some data-options nothing seems to work. I have tried to use script as well and that didnt work either. Heres the data-option as i have typed it.

Peter Weil about 4 years ago

" Data-options are on the roadmap for a later version."

Really? That's not the impression given by http://foundation.zurb.com/sites/docs/orbit.html

At the top, it says v6.04.

And later, "Plugin Options
Use these options to customize an instance of Orbit. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. "

I haven't been able to get Orbit data-options to work either. Would you please clarify the status of Orbit?

Rafi Benkual about 4 years ago

We added data-options for 6.0.4. If you run 'bower-update' you can get the latest version and try it out. Let us know how it goes!

Ryan Patterson almost 4 years ago

Has anyone had any luck getting data-options to work for the orbit slider since updating to the latest version of Foundation? I still can't get any of the data-options to work, even after updating to 6.1.2.

Rafi Benkual almost 4 years ago

How are you using it? Have an example?

Like:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-pause-on-hover="true">

Ryan Patterson almost 4 years ago

Hi Rafi,

My code currently looks like this:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="bullets: false; animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
  <ul class="orbit-container">
    <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    <li class="is-active orbit-slide">
      <div>
        <h3 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p class="text-center">Curabitur sed lectus et odio ultricies egestas. Duis eu dictum tellus. Quisque suscipit nisi ac lacinia convallis. Praesent et iaculis est, vitae elementum purus. Aliquam fermentum nec libero sed rutrum. Ut convallis porta posuere.</p>
      </div>
    </li>
    <li class="orbit-slide">
      <div>
        <h3 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p class="text-center">Curabitur sed lectus et odio ultricies egestas. Duis eu dictum tellus. Quisque suscipit nisi ac lacinia convallis. Praesent et iaculis est, vitae elementum purus. Aliquam fermentum nec libero sed rutrum. Ut convallis porta posuere.</p>
      </div>
    </li>
    <li class="orbit-slide">
      <div>
        <h3 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p class="text-center">Curabitur sed lectus et odio ultricies egestas. Duis eu dictum tellus. Quisque suscipit nisi ac lacinia convallis. Praesent et iaculis est, vitae elementum purus. Aliquam fermentum nec libero sed rutrum. Ut convallis porta posuere.</p>
      </div>
    </li>
    <li class="orbit-slide">
      <div>
        <h3 class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p class="text-center">Curabitur sed lectus et odio ultricies egestas. Duis eu dictum tellus. Quisque suscipit nisi ac lacinia convallis. Praesent et iaculis est, vitae elementum purus. Aliquam fermentum nec libero sed rutrum. Ut convallis porta posuere.</p>
      </div>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>

Ryan Patterson almost 4 years ago

Did I provide a bad code snippet or something? The initial response was quick, but have yet to see a reply to my last message after providing my example. I feel like I'm setting it up correctly, based off the instructions in the F6 sites docs.

Pam Bifaro over 3 years ago

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.

 

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

</div>

Pam Bifaro over 3 years ago

I'm using something very similar to what you have and the fade animation was working and now it's not. It just slides.

 

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

</div>

Pam Bifaro over 3 years ago

I had a problem getting the data-options to work for me too. But then I moved the 

data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

to another div and that seems to work. Here is a sample of how I set my slider up with the data-options.

 


   <!--- ORBIT Slider -------->
<div class="row wrap">
<div class="large-12 medium-12 small-12 columns">
<div class="orbit" role="region" aria-label="Specialties" data-orbit >
</div>

<div id="myslider" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
    <ul class="orbit-container">
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider1.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider2.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider3.jpg">
        </li>
        <li class="orbit-slide">
            <span class="layer-centered">
            </span>
            <img width="2000" height="667" src="img/imageSlider4.jpg">
        </li>
    </ul>
</div>

</div>
</div>
</div>


<!--- ORBIT Slider -------->    

Damir Dunderovic about 3 years ago

Ok, so for anyone still having this issue, I figured out the very simple error. 

Under Plugin Options in Foundation Docs the attribute names are not consistent with Orbit function.

So what happens is customization is not initialized.

All you need to do to get i to work is use the correct attr names:

  • instead of data-auto-play use autoPlay
  • instead of data-timer-delay use timerDelay
  • instead of data-infinite-wrap use infiniteWrap
  • and so on

See foundation.orbit.js for all attr names.

Foundation Docs should be updated of course!