Skip to main content

How to add RTL in Swiper?

Swiper comes with RTL support which means you can use it with right-to-left languages like Arabic, Hebrew, etc.

Here is an example of Swiper with RTL support:

// Third-party Components
import { useTheme } from '@mui/material/styles'
import { useKeenSlider } from 'keen-slider/react'

const SwiperBasic = () => {
// Hooks
const theme = useTheme()
const [ref] = useKeenSlider<HTMLDivElement>({
rtl: theme.direction === 'rtl',
})

return (
<div ref={ref} className='keen-slider'>
...
</div>
)
}

export default SwiperBasic