Blog

Arrow styles, positions and arrows that follow the mouse

Looking up between glass towers

Arrows are how most visitors move a slider on a desktop. The free plugin has eleven arrow styles in any size and color; Gutenslider Pro adds positions, offsets and arrows that follow the mouse. (Updated for Gutenslider 7.0.)

In the free plugin

  • Arrows on or off, separately for desktop, tablet and phone.
  • Eleven arrow styles, from thin chevrons to filled circles, plus your own SVG (see Custom SVG arrows). Try them on the examples page.
  • Arrow size, per device.
  • Colors: arrow, arrow on hover, background, background on hover.

In Gutenslider Pro

  • Position: on the sides, at the top and bottom, or together in a corner (top left, top right, bottom left, bottom right).
  • Offsets: move the arrows horizontally and vertically, and set the space between them.
  • Blend mode: “difference” keeps the arrow visible on light and dark photos.

Arrows that follow the mouse (Pro)

With arrows follow mouse the arrow sits under the pointer while it is over the slider: on the left half it points back, on the right half forward, and a click anywhere moves the slider. It keeps the photos free of buttons and suits portfolios. On touch screens visitors swipe as usual.

The arrow style, size and colors apply to the following arrow as well. Try it on the examples page.

Accessibility

Whatever they look like, the arrows are real buttons with a label (“Previous slide”, “Next slide”), reachable with the Tab key. Keep enough contrast between arrow and photo; the blend mode or a background color helps.