diff --git a/docs/pages/tutorials/integrating-with-laravel.md b/docs/pages/tutorials/integrating-with-laravel.md index 6f3ecc0d..4c64a922 100644 --- a/docs/pages/tutorials/integrating-with-laravel.md +++ b/docs/pages/tutorials/integrating-with-laravel.md @@ -9,7 +9,7 @@ meta: This page explains how to integrate Shoelace with a [Laravel 9](https://laravel.com) app using Vite. For additional details refer to the [Bundling Assets (Vite)](https://laravel.com/docs/9.x/vite) section in the official Laravel docs. :::tip -This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/tutorials/integrating-with-laravel.md) to make it better. +This is a community-maintained document. Please [ask the community](/resources/community) if you have questions about this integration. You can also [suggest improvements](https://github.com/shoelace-style/shoelace/blob/next/docs/pages/tutorials/integrating-with-laravel.md) to make it better. ::: ## Requirements diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts index 0d3d7f94..17538749 100644 --- a/src/components/carousel/carousel.component.ts +++ b/src/components/carousel/carousel.component.ts @@ -456,12 +456,22 @@ export default class SlCarousel extends ShoelaceElement { } // Sets the next index without taking into account clones, if any. - const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - 1); + const newActiveSlide = loop + ? (index + slides.length) % slides.length + : clamp(index, 0, slides.length - slidesPerPage); this.activeSlide = newActiveSlide; + const isRtl = this.matches(':dir(rtl)'); + // Get the index of the next slide. For looping carousel it adds `slidesPerPage` // to normalize the starting index in order to ignore the first nth clones. - const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1); + // For RTL it needs to scroll to the last slide of the page. + const nextSlideIndex = clamp( + index + (loop ? slidesPerPage : 0) + (isRtl ? slidesPerPage - 1 : 0), + 0, + slidesWithClones.length - 1 + ); + const nextSlide = slidesWithClones[nextSlideIndex]; this.scrollToSlide(nextSlide, prefersReducedMotion() ? 'auto' : behavior);