Menu icon Foundation
Orbit Slider Arrows on mobile

Is there any particular reason why the slider arrows and bullets on mobile (touch) devices are set to display none?

I had to make them show, so i've set the display to inherit, maybe will help someone with the same issue.

foundation/components/_orbit.scss

// line 315
.touch {
  .orbit-container {
    .orbit-prev,
    .orbit-next { display: none; }
  }

  .orbit-bullets { display: none; }
}

...

@media #{$small-only} {
  .orbit-stack-on-small {
    .orbit-slides-container {height: auto !important;}
    .orbit-slides-container > * {
      position: relative;
      margin-left: 0% !important;
    }
    .orbit-timer,
    .orbit-next,
    .orbit-prev,
    .orbit-bullets {display: none;}
  }
}

Orbitsliderarrows

Is there any particular reason why the slider arrows and bullets on mobile (touch) devices are set to display none?

I had to make them show, so i've set the display to inherit, maybe will help someone with the same issue.

foundation/components/_orbit.scss

// line 315
.touch {
  .orbit-container {
    .orbit-prev,
    .orbit-next { display: none; }
  }

  .orbit-bullets { display: none; }
}

...

@media #{$small-only} {
  .orbit-stack-on-small {
    .orbit-slides-container {height: auto !important;}
    .orbit-slides-container > * {
      position: relative;
      margin-left: 0% !important;
    }
    .orbit-timer,
    .orbit-next,
    .orbit-prev,
    .orbit-bullets {display: none;}
  }
}
Jeremy Englert over 5 years ago

The arrows end up covering a large percentage of the photos/content if they are not hidden. However, Orbit is touch friendly, so users can simply scroll by sliding from left to right.

Rafi Benkual over 5 years ago

It's up to you to decide if you want the arrows. We have them off for small in favor of swipe scrolling like Jeremy mentioned. You can add custom left and right buttons that are smaller if you want it to be obvious it is an image slider, or just speed up the timer.

We are working on a data option to show arrows on mobile, maybe tiny ones. If anyone has done this we would appreciate a pull request!

Caleb Serna about 5 years ago

If you're using Foundation 5.3 add this to your custom css:

@media only screen and (max-width: 40em) {
  .home-slider-orbit .orbit-next,
  .home-slider-orbit .orbit-prev {
    display: block; }
}

It will show arrows on small devices.