Menu icon Foundation
Change Orbit slider transition

 

Hello,

I cant find where the sass transition for the slider is given, either in the standard foundation css or the MUI sass settings. It removes the class with the transition which makes it hard to see the exact css etc. 

Thanks!

Orbitslider

 

Hello,

I cant find where the sass transition for the slider is given, either in the standard foundation css or the MUI sass settings. It removes the class with the transition which makes it hard to see the exact css etc. 

Thanks!

Rafi Benkual over 2 years ago

You'll want to set the data attribute of use MUI to true. Here is an example: http://codepen.io/rafibomb/pen/mRNJyz?editors=1010

I made it a ridiculous animation, because, why not ;)

 

The instructions are here: http://foundation.zurb.com/sites/docs/orbit.html#using-animation

YH over 2 years ago

Alright thanks, but where can I change the speed of the transition, change to ease-in, set a delay etc. Is this also possible with a MUI attribute?

jaime colins about 2 years ago

 How can i reverse the side? I want to animate the slide from left to right instead of right to left. Any help would be appreciated.

 

Thanks,

Jaime

Sven CAILTEUX about 2 years ago

http://foundation.zurb.com/sites/docs/orbit.html#js-options

 

Pam Bifaro over 1 year ago

I need to change the Orbit slider to slide left to right. I am NOT using SASS. Is there a way to reverse the slide NOT using SASS?

 

Here is my code

 

 

<!----------Orbit slider---------------------->

<div class="grid-x fullWidth">
<div class="large-12 medium-12 small-12 cell" style="background-color:#C3EB4C;">
<div class="orbit" role="region" aria-label="Specialties" data-orbit>
</div>

<div data-orbit data-options="data-anim-in-from-left; data-anim-out-to-right">
    <ul class="orbit-container">
   
        <li class="orbit-slide">
            <img src="img/1.jpg" class="imgFullwidth">
        </li>
       
       
        <li class="orbit-slide">
            <img src="img/2.jpg" class="imgFullwidth">
        </li>
       
       
        <li class="orbit-slide">
            <img src="img/4.jpg" class="imgFullwidth">
        </li>
       
       
     
       
    </ul>
     <nav class="orbit-bullets hide-for-small-only" style="float:right; padding-right:15px; font-size:12px !important;">
  <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"></span></button>
  <button data-slide="2"><span class="show-for-sr"></span></button>

 
</nav>
<img src="img/BannerArrow2.png" alt="We Know People">
</div>

</div>
</div>
</div>
 </div>
<!----------End of Orbit slider---------------------->

Jeremy Mansfield 8 months ago

I also am not using SASS, and would like to know the answer to this question.

Rafi Benkual 8 months ago

You can find the classes here, including speed and delay classes https://github.com/zurb/motion-ui/blob/develop/docs/classes.md