.An efficiency centered Vue carousel created for SSR/SSG settings. No JS is made use of to layout the carousel or it is actually slides. The objective is actually to boost LCP and CLS ratings given that there is actually no design or profit changes when JS hydates. It is actually predominantly developed for leaving "card" style slides (like for linking to short articles or products) where the carousel-ness is conditionally administered based upon the amount of cards that are actually slotted in and also the viewport size.Browse through the demo: https://vue-ssr-carousel.netlify.app.Put up.anecdote 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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, see the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated along with v-for, make use of essential worths that are based on the data you are actually knotting by means of. In other words, do v-for=" slide in slides": trick=' slide.id' instead that v-for=" slide, mark in slides": trick=' mark'.Do not make use of v-if on the origin element of slide components.API.Props.Ports.Ports.Description.default.Where your slides acquire injected.back-arrow.Replace the default back icon. Port props:.impaired - Correct if at first web page when not looping.next-arrow.Change the nonpayment next image. Slot props:.disabled - Accurate if at last webpage when certainly not knotting.dot.Substitute the default pagination dots. Port props:.mark - The page mark that the dot represents.handicapped - Real if dot represents existing page.Strategies.Techniques.Explanation.next().Go forward a page or even slide, depending on the paginate-by-slide prop.back().Go back a page or slide, relying on the paginate-by-slide set.goto( mark).Visit a mark. If paginate-by-slide is misleading, this equates to a webpage made up for. If true, this relates to a slide made up for.Activities.View https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.adjustment( mark ).Shot when the internal index counter changes.input.Same as change however planned for use along with v-model.press.Fired on mouse or even touch down.launch.Fired on computer mouse or retouch.burden: start.Shot on start of tugging.bother: end.Shot on end of dragging.tween: start( index ).Fired when the carousel starts tweening to it's ultimate posture.tween: end( mark ).Fired when the carousel has ended up tweening to it's destination.