.An efficiency focused Vue carousel created for SSR/SSG atmospheres. No JS is actually made use of to design the carousel or even it is actually slides. The objective is to enhance LCP and CLS scores considering that there is actually no format or markup adjustments when JS hydates. It is actually mostly designed for making "memory card" style slides (like for connecting to articles or products) where the carousel-ness is conditionally applied based on the amount of cards that are slotted in as well as the viewport size.Look at the trial: https://vue-ssr-carousel.netlify.app.Mount.yarn add vue-ssr-carousel.Default.import SsrCarousel coming 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']Consumption.Slide 1.Slide 2.Slide 3.For additional instances, observe the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated along with v-for, make use of crucial worths that are actually based on the data you are knotting by means of. In other words, carry out v-for=" slide in slides": key=' slide.id' rather that v-for=" slide, mark in slides": trick=' mark'.Do not make use of v-if on the root aspect of slide components.API.Props.Ports.Ports.Description.default.Where your slides receive injected.back-arrow.Replace the default back icon. Slot props:.disabled - Accurate if at first page when certainly not looping.next-arrow.Change the default following icon. Port props:.handicapped - Correct if at last page when not knotting.dot.Switch out the default pagination dots. Port props:.mark - The page index that the dot stands for.handicapped - Correct if dot represents current webpage.Procedures.Procedures.Summary.following().Move forward a page or even slide, relying on the paginate-by-slide set.back().Return a web page or slide, depending upon the paginate-by-slide prop.goto( index).Go to an index. If paginate-by-slide is actually untrue, this equates to a web page offset. If real, this relates to a slide balanced out.Events.Find https://vue-ssr-carousel.netlify.app/events.Occasions.Summary.adjustment( index ).Axed when the inner mark counter adjustments.input.Same as change however intended for make use of along with v-model.press.Fired on computer mouse or touch down.release.Shot on computer mouse or even patch up.burden: start.Shot on start of dragging.drag: end.Fired on end of moving.tween: beginning( mark ).Fired when the carousel begins tweening to it's last position.tween: end( index ).Shot when the slide carousel has finished tweening to it's place.