Menu icon Foundation
HIDE NAV ARROWS (NEXT & PREV) of ORBIT for MOBILE DEVICES

Hello, how can I hide the Nav Arrows for Mobile Devices?

<div class="row show-for-small-only">
  <ul class="example-orbit" data-orbit>
  <li>
    <img src="../../../images/dog1.jpg" alt="slide 1" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption One.
    </div>-->
  </li>
  <li>
    <img src="../../../images/bill1.jpg" alt="slide 2" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption Two.
    </div> -->
  </li>
  <li>
    <img src="../../../images/dog5.jpg" alt="slide 3" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption Three.
    </div>-->
  </li>
</ul>  

</div>

            

         

Nav prev

arrowsOrbit

Hello, how can I hide the Nav Arrows for Mobile Devices?

<div class="row show-for-small-only">
  <ul class="example-orbit" data-orbit>
  <li>
    <img src="../../../images/dog1.jpg" alt="slide 1" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption One.
    </div>-->
  </li>
  <li>
    <img src="../../../images/bill1.jpg" alt="slide 2" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption Two.
    </div> -->
  </li>
  <li>
    <img src="../../../images/dog5.jpg" alt="slide 3" />
    <!--Remove this to replace with ribbons <div class="orbit-caption">
      Caption Three.
    </div>-->
  </li>
</ul>  

</div>

            

         

Nav prev

Marek Simko gave the most helpful answer for this post
Marek Simko over 4 years ago

maybe you could use interchange to load one type of orbit slider without nav arrows for mobile, and another one for bigger screens with arrows

Marek Simko over 4 years ago

maybe you could use interchange to load one type of orbit slider without nav arrows for mobile, and another one for bigger screens with arrows

Steve Trask over 4 years ago

Hey,

You can just set a custom media query with a max width 640px with the CSS

.orbit-prev, .orbit-next {
    Display: none;
}

This will hide them for mobile, please check as typed on phone

Hope this helps

Steve

Steve Trask over 4 years ago

Okay just to give the full picture as back at computer now

@media only screen and (max-width : 640px) {

    .orbit-prev, .orbit-next {
        display: none;
    }

}

Alexander Assimidis over 4 years ago

You could use the hide-for-small argument with Jquery

ajaymittal 3 months ago