.An efficiency focused Vue carousel designed for SSR/SSG settings. No JS is actually used to format the slide carousel or it's slides. The goal is to enhance LCP as well as CLS ratings given that there is actually no format or even profit modifications when JS hydates. It's mostly developed for making "memory card" design slides (like for connecting to articles or items) where the carousel-ness is actually conditionally applied based upon the number of memory cards that are slotted in in addition to the viewport size.Browse through the demonstration: https://vue-ssr-carousel.netlify.app.Mount.yarn incorporate vue-ssr-carousel.Nonpayment.import SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss coming from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For even more instances, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced with v-for, make use of essential worths that are based on the data you are knotting through. In other words, perform v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, mark in slides": trick=' index'.Don't make use of v-if on the root element of slide elements.API.Props.Slots.Slots.Description.default.Where your slides acquire injected.back-arrow.Substitute the default back image. Slot props:.disabled - Correct if in the beginning web page when not knotting.next-arrow.Substitute the nonpayment following icon. Port props:.impaired - Correct if finally webpage when not looping.dot.Change the default pagination dots. Slot props:.index - The webpage mark that the dot stands for.handicapped - Accurate if dot represents existing web page.Procedures.Methods.Description.next().Move forward a page or even slide, relying on the paginate-by-slide prop.back().Go back a page or slide, relying on the paginate-by-slide set.goto( mark).Head to a mark. If paginate-by-slide is false, this equates to a web page made up for. If real, this corresponds to a slide balanced out.Activities.Find https://vue-ssr-carousel.netlify.app/events.Occasions.Description.adjustment( index ).Terminated when the inner mark counter modifications.input.Like modification however aimed for usage with v-model.push.Shot on mouse or even contact down.release.Fired on computer mouse or retouch.nuisance: beginning.Fired on beginning of pulling.nuisance: end.Fired on end of tugging.tween: beginning( mark ).Discharged when the carousel starts tweening to it is actually ultimate posture.tween: edge( mark ).Shot when the carousel has finished tweening to it's location.