.A functionality focused Vue slide carousel made for SSR/SSG environments. No JS is actually utilized to design the carousel or even it's slides. The target is actually to enhance LCP and CLS credit ratings since there is actually no style or profit changes when JS hydates. It is actually primarily developed for making "card" type slides (like for connecting to posts or products) where the carousel-ness is actually conditionally applied based upon the variety of memory cards that are actually slotted in along with the viewport size.Have a look at the demo: https://vue-ssr-carousel.netlify.app.Mount.anecdote add vue-ssr-carousel.Nonpayment.bring in 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 even more instances, view the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated with v-for, utilize essential worths that are based on the records you are actually looping with. Simply put, carry out v-for=" slide in slides": key=' slide.id' somewhat that v-for=" slide, index in slides": trick=' index'.Don't make use of v-if on the origin element of slide components.API.Props.Slots.Ports.Description.nonpayment.Where your slides receive administered.back-arrow.Substitute the default back icon. Slot props:.impaired - Real if in the beginning webpage when certainly not looping.next-arrow.Replace the nonpayment upcoming image. Slot props:.impaired - Real if at last page when not looping.dot.Change the nonpayment pagination dots. Port props:.mark - The web page mark that the dot embodies.impaired - Correct if dot represents existing webpage.Approaches.Procedures.Explanation.upcoming().Go forward a webpage or even slide, depending upon the paginate-by-slide prop.back().Go back a webpage or even slide, relying on the paginate-by-slide set.goto( index).Head to a mark. If paginate-by-slide is actually untrue, this relates to a page offset. If true, this equates to a slide offset.Celebrations.See https://vue-ssr-carousel.netlify.app/events.Occasions.Explanation.adjustment( mark ).Shot when the internal index counter changes.input.Like improvement yet intended for use with v-model.push.Fired on computer mouse or even contact down.launch.Shot on mouse or even repair.nuisance: begin.Shot on begin of dragging.drag: end.Shot on end of tugging.tween: beginning( index ).Discharged when the carousel starts tweening to it's last setting.tween: end( index ).Fired when the slide carousel has actually completed tweening to it is actually destination.