Menu icon Foundation
Orbit data options to animate

I am using the Orbit slider and I'm posting a question that had been posted a while ago but I don't think it has been resolved so here it is again. I am trying to use data-options to animate the slides but the animation is not working the slider is only sliding the frame out. Here is the code that I have applied

 

<!--- 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 data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

<div id="myslider" data-orbit>
    <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 -------->    
   
   
   

data-options

I am using the Orbit slider and I'm posting a question that had been posted a while ago but I don't think it has been resolved so here it is again. I am trying to use data-options to animate the slides but the animation is not working the slider is only sliding the frame out. Here is the code that I have applied

 

<!--- 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 data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
</div>

<div id="myslider" data-orbit>
    <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 -------->    
   
   
   

Pam Bifaro over 3 years ago

I started moving stuff around and ended up fixing it.  I moved the data-options to my div id=myslider and it started working again. So instead of adding it to the outer container I moved it closer to the UL and it worked. I did try it on the UL but that did not work for me. So I guess if it doesn't work for you try moving it to inner or outer divs to see if that fixes it.

   
<!--- 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 -------->