Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-ssr-carousel
Advanced tools
Readme
A performance focused Vue carousel designed for SSR/SSG environments. No JS is used to layout the carousel or it's slides. The goal is to improve LCP and CLS scores because there is no layout or markup changes when JS hydates. It's primarily designed for rendering "card" style slides (like for linking to articles or products) where the carousel-ness is conditionally applied based on the number of cards that are slotted in as well as the viewport width.
Check out the demo: https://vue-ssr-carousel.netlify.app.
yarn add vue-ssr-carousel
import SsrCarousel from 'vue-ssr-carousel'
import ssrCarouselCss from 'vue-ssr-carousel/index.css'
Vue.component 'ssr-carousel', SsrCarousel
// nuxt.config.js
export default {
buildModules: [ 'vue-ssr-carousel/nuxt' ]
}
<ssr-carousel>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</ssr-carousel>
For more examples, see the demo: https://vue-ssr-carousel.netlify.app.
v-for
, use key
values that are based on the data you are looping through. In other words, do v-for='slide in slides' :key='slide.id'
rather that v-for='slide, index in slides' :key='index'
.v-if
on the root element of slide components.Props | Default | Description |
---|---|---|
slides-per-page | 1 | How many slides are shown per page. Can be set to null to allow for flexible widths for slides. See https://vue-ssr-carousel.netlify.app/responsive and note the caveats mentiond within. |
gutter | 20 | The size of the space between slides. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/gutters. |
paginate-by-slide | false | When false , dragging the carousel or interacting with the arrows will advance a full page of slides at a time. When true , the carousel will come to a rest at each slide. |
pagination-label | null | Customizes the label used in aria labels to describe a page. |
autoplay-delay | 0 | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay. |
loop | false | Boolean to enable looping / infinite scroll. See https://vue-ssr-carousel.netlify.app/looping. |
center | false | Render the first slide in the middle of the carousel. Should only be used with odd numbers of slides-per-page . This results in the slides being rendered visually in a different order than the DOM which is an accessibility concern. See https://vue-ssr-carousel.netlify.app/looping. |
peek | 0 | A width value for how far adjacent cards should peek into the carousel canvas. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/peeking. |
peek-left | 0 | Set peek value on just the left edge. |
peek-right | 0 | Set peek value on just the right edge. |
peek-gutter | false | Set peek value equal to gutter value. |
feather | false | Fades out the left and right edges using a CSS mask-image gradient. Set to true to use the default 20px value or as number or any CSS resolvable string to set an explicit width. This is designed to be used with peek properties. See https://vue-ssr-carousel.netlify.app/peeking. |
overflow-visible | false | Disables the overflow:hidden that wraps the slide track. You would do this if you want to handle that masking in an ancestor element. See https://vue-ssr-carousel.netlify.app/peeking. |
no-drag | false | Disables the ability to drag the carousel. |
show-arrows | false | Whether to show back/forward arrows. See https://vue-ssr-carousel.netlify.app/ui. |
show-dots | false | Whether to show dot style pagination dots. See https://vue-ssr-carousel.netlify.app/ui. |
rtl | false | Adjust layout for right to left sites. See https://vue-ssr-carousel.netlify.app/accessibility. |
value | undefined | Used as part of v-model to set the initial slide to show. See https://vue-ssr-carousel.netlify.app/events. |
responsive | [] | Adjust settings at breakpoints. See https://vue-ssr-carousel.netlify.app/responsive. Note, loop and paginate-by-slide cannot be set responsively. |
Slots | Description |
---|---|
default | Where your slides get injected. |
back-arrow | Replace the default back icon. Slot props: |
disabled - True if at first page when not looping. | |
next-arrow | Replace the default next icon. Slot props: |
disabled - True if at last page when not looping. | |
dot | Replace the default pagination dots. Slot props: |
index - The page index that the dot represents. | |
disabled - True if dot represents current page. |
Methods | Description |
---|---|
next() | Go forward a page or slide, depending on the paginate-by-slide prop |
back() | Go back a page or slide, depending on the paginate-by-slide prop |
goto(index) | Go to an index. If paginate-by-slide is false , this equates to a page offset. If true , this equates to a slide offset. |
See https://vue-ssr-carousel.netlify.app/events
Events | Description |
---|---|
change({ index }) | Fired when the internal index counter changes. |
input | Same as change but intended for use with v-model . |
press | Fired on mouse or touch down. |
release | Fired on mouse or touch up. |
drag:start | Fired on start of dragging. |
drag:end | Fired on end of dragging. |
tween:start({ index }) | Fired when the carousel starts tweening to it's final position. |
tween:end({ index }) | Fired when the carousel has finished tweening to it's destination. |
Mismatching childNodes vs. VNodes
error when the page hydrates at a viewport width that changes the slidesToShow
.infinite: true
, Slick adds a full set of .slick-cloned
slides before the "real" slides, and another full set after themFAQs
A performance focused Vue carousel designed for SSR/SSG environments.
The npm package vue-ssr-carousel receives a total of 2,663 weekly downloads. As such, vue-ssr-carousel popularity was classified as popular.
We found that vue-ssr-carousel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.