Menu icon Foundation
Orbit Slider

By default the slider goers from right to left. I am trying to get the slide to go from left to right. Here is what I have in the page:

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

 

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

<div>

By default the slider goers from right to left. I am trying to get the slide to go from left to right. Here is what I have in the page:

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

 

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