{"_id":"@d3t-distribution/vue3-ssr-carousel","_rev":"35-ba81b4b5cc6f60a4b3df227fe9ca25bc","name":"@d3t-distribution/vue3-ssr-carousel","dist-tags":{"latest":"0.2.6"},"versions":{"0.1.0":{"name":"@d3t-distribution/vue3-ssr-carousel","version":"0.1.0","author":{"name":"D3T Distribution","email":"it@motoblouz.com"},"_id":"@d3t-distribution/vue3-ssr-carousel@0.1.0","maintainers":[{"name":"d3t","email":"it@motoblouz.com"}],"homepage":"https://github.com/D3T-Distribution/vue3-ssr-carousel#readme","bugs":{"url":"https://github.com/D3T-Distribution/vue3-ssr-carousel/issues"},"dist":{"shasum":"48b81345076c6cf427008edd5d4b70e1d825b328","tarball":"https://registry.npmjs.org/@d3t-distribution/vue3-ssr-carousel/-/vue3-ssr-carousel-0.1.0.tgz","fileCount":144,"integrity":"sha512-TeQ+ds0pWrx+gGtjmNIY/+F2oe2IAoHc6bz4ToTsfNFY15e8aMI4g0yni0bdzUQ7UtlRrDVsWUDnhwpiSBvY4w==","signatures":[{"sig":"MEUCIQDVWQ3BhlAh5bcYKi1g9ltX7a9IbeVGl50aX+HVLHeTTQIgNq5R8FdryZ9WjsbTv3jiLCyPT1ys85PJrqxlB6pahoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6526003},"gitHead":"e35f4e1b4a8c303dd2cf92effbc51e4c35b6258a","scripts":{"dev":"nuxi dev demo","lint":"prettier --write .","build":"nuxi build demo","cy:run":"cypress run","cy:open":"cypress open","preview":"nuxi preview demo","release":"release-it","generate":"yarn install && nuxi generate demo"},"_npmUser":{"name":"d3t","email":"it@motoblouz.com"},"repository":{"url":"git+https://github.com/D3T-Distribution/vue3-ssr-carousel.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Netlify Status](https://api.netlify.com/api/v1/badges/7b82aec7-2f1a-4d02-b178-9c1dfb5be90f/deploy-status)](https://app.netlify.com/sites/vue3-ssr-carousel/deploys) \"Version\"\n\"Downloads\"\n\n#### N.B: This repository is a fork of [vue-ssr-carousel](https://github.com/BKWLD/vue-ssr-carousel) with some changes to make it work with Vue 3 and Nuxt 3. \n#### Written from CoffeeScript/Pug/Stylus to JS/TS/SCSS.\n\nA performance focused Vue 3/Nuxt 3 carousel designed for SSR/SSG environments. No JS is used to lay out the carousel or\nits slides. The goal is to improve LCP and CLS scores because there is no layout or markup changes when JS hydrates.\nIt's primarily designed for rendering \"card\" style slides (like for linking to articles or products\") where the carousel-ness\nis conditionally applied based on the number of cards that are slotted in as well as the viewport width.\n\nCheck out the demo: https://vue3-ssr-carousel.netlify.app\n\n## Getting Started\n\n```sh\nyarn add @d3t-distribution/vue3-ssr-carousel\n```\n\n### Default\n\n```js\n// Import Vue and SsrCarousel from the source file.\nimport SsrCarousel from '../../src/ssr-carousel';\n\nexport default defineNuxtPlugin((nuxtApp) => {\n // Register the 'ssr-carousel' component.\n nuxtApp.vueApp.component('ssr-carousel', SsrCarousel);\n});\n```\n\n### Nuxt\n\n```js\n// nuxt.config.js\nexport default {\n buildModules: ['vue3-ssr-carousel/nuxt']\n};\n```\n\n## Usage\n\n```vue\n\n\n
Slide 1
\n
Slide 2
\n
Slide 3
\n\n```\n\n## API\n\n### Props\n\n| **Props** | **Default** | **Description** |\n|---------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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. |\n| `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. |\n| `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. |\n| `autoplay-delay` | `0` | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay. |\n| `loop` | `false` | Boolean to enable looping / infinite scroll. See https://vue-ssr-carousel.netlify.app/looping. |\n| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/order#accessibility_concerns). See https://vue-ssr-carousel.netlify.app/looping. |\n| `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. |\n| `peek-left` | `0` | Set peek value on just the left edge. |\n| `peek-right` | `0` | Set peek value on just the right edge. |\n| `peek-gutter` | `false` | Set peek value equal to `gutter` value. |\n| `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. |\n| `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. |\n| `no-drag` | `false` | Disables the ability to drag the carousel. |\n| `show-arrows` | `false` | Whether to show back/forward arrows. See https://vue-ssr-carousel.netlify.app/ui. |\n| `show-dots` | `false` | Whether to show dot style pagination dots. See https://vue-ssr-carousel.netlify.app/ui. |\n| `value` | `undefined` | Used as part of `v-model` to set the initial slide to show. See https://vue-ssr-carousel.netlify.app/events. |\n| `responsive` | `[]` | Adjust settings at breakpoints. See https://vue-ssr-carousel.netlify.app/responsive. Note, `loop` and `paginate-by-slide` cannot be set responsively. |\n\n### Slots\n\n| **Slots** | **Description** |\n|--------------|------------------------------------------------------|\n| `default` | Where your slides get injected. |\n| `back-arrow` | Replace the default back icon. **Slot props:** |\n| | `disabled` - True if at first page when not looping. |\n| `next-arrow` | Replace the default next icon. **Slot props:** |\n| | `disabled` - True if at last page when not looping. |\n| `dot` | Replace the default pagination dots. **Slot props:** |\n| | `index` - The page index that the dot represents. |\n| | `disabled` - True if dot represents current page. |\n\n### Methods\n\n| Methods | Description |\n|---------------|------------------------------------------------------------------------------------------------------------------------------|\n| `next()` | Go forward a page or slide, depending on the `paginate-by-slide` prop |\n| `back()` | Go back a page or slide, depending on the `paginate-by-slide` prop |\n| `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. |\n\n### Events\n\n| Events | Description |\n|--------------------------|--------------------------------------------------------------------|\n| `change({ index })` | Fired when the internal index counter changes. |\n| `update:modelValue` | Same as `change` but intended for use with `v-model`. |\n| `press` | Fired on mouse or touch down. |\n| `release` | Fired on mouse or touch up. |\n| `drag:start` | Fired on start of dragging. |\n| `drag:end` | Fired on end of dragging. |\n| `tween:start({ index })` | Fired when the carousel starts tweening to it's final position. |\n| `tween:end({ index })` | Fired when the carousel has finished tweening to it's destination. |\n\n## Why another carousel component\n\n#### Issues with [flickity](https://flickity.metafizzy.co/)\n\n- Not a Vue component, so extra work building a Vue wrapper for it.\n- No SSR support, delaying LCP scoring.\n- When JS hydrates, the slides get nested in a new parent, which affects LCP calculations.\n\n#### Issues with [vue-slick-carousel](https://github.com/gs-shop/vue-slick-carousel)\n\n- Slick applies responsive rules only after JS inits. This also results in getting a `Mismatching childNodes vs. VNodes`\n error when the page hydrates at a viewport width that changes the `slidesToShow`.\n- It's extra work to make the carousel look the same before and after Slick inits, since you have to style them two\n different ways.\n- Difficulty determining if there's overflow after Slick inits because when Slick is initialized and `infinite: true`,\n Slick adds a full set of `.slick-cloned` slides before the \"real\" slides, and another full set after them\n- Doesn't handle being empty well.\n- When using custom arrows or dots, it would show a warning that the Nodes do not match.\n- Doesn't do a good job of preventing images and links within slides from preventing dragging.\n\n## Contribute\n\nWe invite you to contribute and help improve this repo 💚\n\nHere are a few ways you can get involved:\n\n- **Reporting Bugs / Share suggestions:** If you come across any bugs or have ideas to enhance the code, your are free\n to create an [issue](https://github.com/D3T-Distribution/vue3-ssr-carousel/issues) or send\n a [pull-request](https://github.com/D3T-Distribution/vue3-ssr-carousel/pulls).\n\n## Local Development\n\n### Installation\n\n```sh\n# Install dependencies and start dev server (http://localhost:3006)\nyarn install && yarn dev\n```\n\n### Tests\n\n#### Run all\n\n```sh\nyarn ci:run\n```\n\n#### Open interface\n\n```sh\nyarn ci:open\n```\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}