diff --git a/src/concerns/rtl.coffee b/src/concerns/rtl.coffee index 9c6873b..3072abe 100644 --- a/src/concerns/rtl.coffee +++ b/src/concerns/rtl.coffee @@ -8,7 +8,5 @@ export default # As an easy way to support rtl, update the index to the final value # when RTL is enabled. This is change is combined with reversing the order - # of the slides in `ssr-carousel-track`. The downside of this appraoch is - # that it's not SSR friendly; the x position of the track can't be calcualted - # until the component mounts and it's internal width can be measured. + # of the slides in `ssr-carousel-track` created: -> @index = @pages - @value - 1 if @rtl diff --git a/src/ssr-carousel-track.vue b/src/ssr-carousel-track.vue index ce7be6b..12f4494 100644 --- a/src/ssr-carousel-track.vue +++ b/src/ssr-carousel-track.vue @@ -12,6 +12,7 @@ export default leftPeekingSlideIndex: Number rightPeekingSlideIndex: Number rtl: Boolean + slideWidth: Number data: -> @@ -112,7 +113,13 @@ export default getSlideComponents: -> slides = [...(@$slots.default || []), ...(@$slots.clones || [])] .filter (vnode) -> !vnode.text - if @rtl then slides = slides.reverse() + + # Reverses the slide if rtl and if the slide slide width is known. This + # second condition exists to prevent the reversal from happening on SSR. + # Which is important because this logic is paired with setting the + # intial index to the last page which can't be known until the slide + # width is known. + if @rtl and @slideWidth then slides = slides.reverse() return slides # Makes a clone of the vnode properties we'll be updating so the changes diff --git a/src/ssr-carousel.vue b/src/ssr-carousel.vue index 55c181b..b473ec4 100644 --- a/src/ssr-carousel.vue +++ b/src/ssr-carousel.vue @@ -42,6 +42,7 @@ leftPeekingSlideIndex, rightPeekingSlideIndex, rtl, + slideWidth, }`) //- Render the slotted slides