.A performance centered Vue carousel created for SSR/SSG environments. No JS is utilized to design the slide carousel or it's slides. The objective is actually to boost LCP and also CLS credit ratings because there is actually no design or even markup changes when JS hydates. It's predominantly created for providing "card" design slides (like for connecting to short articles or even products) where the carousel-ness is conditionally administered based on the number of memory cards that are actually slotted in in addition to the viewport width.Browse through the demonstration: https://vue-ssr-carousel.netlify.app.Put in.yarn add vue-ssr-carousel.Default.bring in 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 examples, observe the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced with v-for, utilize crucial values that are based on the records you are actually knotting through. To put it simply, carry out v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, index in slides": secret=' index'.Don't make use of v-if on the root element of slide elements.API.Props.Ports.Ports.Description.default.Where your slides receive infused.back-arrow.Switch out the nonpayment back icon. Port props:.disabled - Accurate if in the beginning page when certainly not looping.next-arrow.Change the nonpayment next icon. Port props:.impaired - Real if at last web page when not knotting.dot.Switch out the nonpayment pagination dots. Slot props:.mark - The page index that the dot stands for.handicapped - Real if dot exemplifies current page.Strategies.Strategies.Summary.following().Move forward a web page or even slide, relying on the paginate-by-slide set.back().Go back a page or even slide, depending on the paginate-by-slide prop.goto( index).Visit a mark. If paginate-by-slide is untrue, this relates to a web page countered. If correct, this translates to a slide offset.Activities.Observe https://vue-ssr-carousel.netlify.app/events.Occasions.Summary.modification( index ).Fired when the inner index counter improvements.input.Same as change but planned for make use of with v-model.press.Shot on mouse or touch down.release.Shot on computer mouse or repair.burden: beginning.Fired on begin of dragging.bother: end.Fired on end of dragging.tween: begin( index ).Fired when the carousel begins tweening to it is actually ultimate placement.tween: edge( mark ).Fired when the carousel has ended up tweening to it's destination.