.A performance centered Vue slide carousel developed for SSR/SSG atmospheres. No JS is actually utilized to layout the carousel or even it is actually slides. The objective is actually to boost LCP and also CLS ratings due to the fact that there is no layout or even profit changes when JS hydates. It is actually primarily developed for providing "card" style slides (like for linking to articles or items) where the carousel-ness is actually conditionally applied based on the amount of memory cards that are slotted in as well as the viewport distance.Look into the trial: https://vue-ssr-carousel.netlify.app.Put up.yarn include vue-ssr-carousel.Default.bring in SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Use.Slide 1.Slide 2.Slide 3.For more examples, find the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created along with v-for, make use of vital worths that are actually based upon the data you are looping through. To put it simply, do v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, index in slides": trick=' mark'.Do not use v-if on the root factor of slide elements.API.Props.Slots.Slots.Explanation.default.Where your slides obtain injected.back-arrow.Switch out the nonpayment back icon. Port props:.handicapped - Real if at first web page when not looping.next-arrow.Substitute the nonpayment upcoming symbol. Port props:.impaired - Correct if finally web page when certainly not looping.dot.Substitute the default pagination dots. Port props:.mark - The webpage index that the dot embodies.handicapped - True if dot stands for current web page.Strategies.Approaches.Description.upcoming().Move forward a web page or even slide, depending on the paginate-by-slide prop.back().Return a web page or even slide, relying on the paginate-by-slide uphold.goto( index).Visit a mark. If paginate-by-slide is actually misleading, this relates to a page made up for. If real, this equates to a slide offset.Celebrations.View https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.improvement( mark ).Terminated when the internal index counter improvements.input.Like change however aimed for use with v-model.press.Shot on mouse or touch down.release.Shot on mouse or retouch.pain: begin.Fired on beginning of yanking.bother: end.Shot on end of tugging.tween: begin( mark ).Discharged when the carousel starts tweening to it's ultimate setting.tween: end( mark ).Fired when the carousel has completed tweening to it's destination.