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 almost 3 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 almost 3 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 over 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 over 2 years ago

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

 

Pam Bifaro almost 2 years 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 12 months ago

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

Rafi Benkual 12 months ago

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