Open MuhammadM1998 opened 7 months ago
N/A
v2.13.0
https://ui.nuxt.com/components/carousel#arrows
dir="rtl"
I've created a video repro but my internet is poor it didn't upload š
prevButton: { color: 'black' as const, - class: 'rtl:[&_span:first-child]:rotate-180 absolute left-4 top-1/2 transform -translate-y-1/2 rounded-full', + class: 'rtl:[&_span:first-child]:rotate-180 absolute ltr:left-4 rtl:right-4 top-1/2 transform -translate-y-1/2 rounded-full', icon: 'i-heroicons-chevron-left-20-solid' }, nextButton: { color: 'black' as const, - class: 'rtl:[&_span:last-child]:rotate-180 absolute right-4 top-1/2 transform -translate-y-1/2 rounded-full', + class: 'rtl:[&_span:last-child]:rotate-180 absolute ltr:right-4 rtl:left-4 top-1/2 transform -translate-y-1/2 rounded-full', icon: 'i-heroicons-chevron-right-20-solid ' }
function onClickNext () {
function onClickPrev () {
function onClick (page: number) {
const dirMultiplier = getComputedStyle(carouselRef.value).direction === 'ltr' ? 1 : -1
x.value = (page - 1) * itemWidth.value
x.value = (page - 1) (itemWidth.value dirMultiplier) )}
The only issue left is the style of the active indicator which is determined by this line. Problem is carouselRef isn't reactive so using getComputedStyle on it to get the dir won't work (That's why I'm repeating it inside each function)
carouselRef
getComputedStyle
dir
No response
Would you mind submitting a PR so I can see the preview?
Sure no problem
I have the same issue
Environment
N/A
Version
v2.13.0
Reproduction
https://ui.nuxt.com/components/carousel#arrows
Description
dir="rtl"
to the carousel parent or html tagI've created a video repro but my internet is poor it didn't upload š
Additional context
function onClickPrev () {
function onClick (page: number) {
const dirMultiplier = getComputedStyle(carouselRef.value).direction === 'ltr' ? 1 : -1
x.value = (page - 1) * itemWidth.value
x.value = (page - 1) (itemWidth.value dirMultiplier) )}
The only issue left is the style of the active indicator which is determined by this line. Problem is
carouselRef
isn't reactive so usinggetComputedStyle
on it to get thedir
won't work (That's why I'm repeating it inside each function)Logs
No response