.A performance focused Vue slide carousel created for SSR/SSG atmospheres. No JS is actually utilized to style the slide carousel or it's slides. The objective is actually to boost LCP and CLS credit ratings due to the fact that there is actually no layout or profit improvements when JS hydates. It is actually predominantly created for making "card" design slides (like for connecting to articles or products) where the carousel-ness is conditionally administered based on the amount of cards that are actually slotted in and also the viewport distance.Check out the trial: https://vue-ssr-carousel.netlify.app.Mount.anecdote incorporate vue-ssr-carousel.Nonpayment.bring in SsrCarousel coming from 'vue-ssr-carousel'.import ssrCarouselCss coming from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For additional examples, see the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created along with v-for, use crucial market values that are based upon the records you are actually knotting with. In other words, do v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, mark in slides": trick=' mark'.Don't make use of v-if on the origin component of slide parts.API.Props.Slots.Slots.Explanation.nonpayment.Where your slides get infused.back-arrow.Replace the default back image. Slot props:.handicapped - Correct if in the beginning web page when not knotting.next-arrow.Substitute the nonpayment following symbol. Port props:.disabled - Accurate if at last page when not looping.dot.Substitute the default pagination dots. Port props:.mark - The web page mark that the dot embodies.impaired - True if dot exemplifies current web page.Methods.Approaches.Description.next().Move forward a page or even slide, depending upon the paginate-by-slide prop.back().Return a web page or even slide, relying on the paginate-by-slide uphold.goto( mark).Visit a mark. If paginate-by-slide is inaccurate, this corresponds to a web page offset. If true, this relates to a slide made up for.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Occasions.Explanation.modification( mark ).Axed when the interior index counter modifications.input.Like modification however intended for make use of with v-model.press.Shot on mouse or even touch down.launch.Fired on computer mouse or even patch up.burden: begin.Shot on begin of yanking.drag: end.Fired on end of pulling.tween: beginning( index ).Fired when the carousel begins tweening to it's last setting.tween: edge( index ).Axed when the slide carousel has actually ended up tweening to it is actually place.