liftbox

Right-to-left

Mirror arrows, swipes, keys, thumbnails, dots and toolbar for right-to-left languages.

The lightbox follows the direction of the element it is portalled into, so <html dir="rtl"> is enough. dir="rtl" or dir="ltr" forces one.

<Lightbox dir="rtl" labels={arabicLabels} {...props} />

Live demo. Click a thumbnail to open it.

In right-to-left layouts, the next slide comes from the left:

  • The arrows swap sides and their icons mirror.
  • A drag to the right and ArrowLeft go forward.
  • The thumbnails, dots and toolbar run right to left.
  • The overflow menu opens from the left edge.
  • The slideshow progress grows from the right.

The root carries dir="ltr" or dir="rtl", so your CSS can target it. Translate the strings with labels.

Edit this page on GitHub