{"_id":"v-agile","_rev":"1-aaf3a7c8bc67bc0a7f0f984a41464ed0","name":"v-agile","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"v-agile","version":"0.0.1","description":"A easy to use carousel component for Vue","scripts":{"dev":"vite","build:demo":"NODE_ENV=production vite build --mode demo","build:lib":"NODE_ENV=production vite build --mode lib","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 1","release":"node scripts/release.js","serve":"vite preview"},"main":"src/index.js","unpkg":"lib/v-agile.umd.js","dependencies":{},"devDependencies":{"@vitejs/plugin-vue":"^2.0.1","@vue/compiler-sfc":"^3.2.27","chalk":"^4.1.1","conventional-changelog-cli":"^2.2.2","enquirer":"^2.3.6","eslint":"^7.17.0","eslint-config-prettier":"^8.3.0","eslint-plugin-vue":"^8.3.0","execa":"^5.0.0","lint-staged":"^12.2.2","minimist":"^1.2.5","prettier":"^2.5.1","sass":"^1.49.0","semver":"^7.3.5","vite":"^2.7.13","vue":"^3.2.27"},"repository":{"type":"git","url":"https://github.com/jambonn/v-agile.git"},"bugs":{"url":"https://github.com/jambonn/v-agile/issues"},"keywords":["vue","carousel","slider","responsive","agile"],"author":{"name":"Jambon","email":"hoa.nx.dev@gmail.com"},"license":"MIT","gitHooks":{"pre-commit":"lint-staged","commit-msg":"node scripts/verifyCommit.js"},"lint-staged":{"*.{js,vue}":["eslint --quiet"],"*.ts?(x)":["eslint --quiet"]},"engines":{"node":">=12.22.0"},"licenseText":"MIT License\n\nCopyright (c) 2022 Jambon\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"v-agile@0.0.1","dist":{"shasum":"b07eef3e32c91faa13bd0bb527a174b7bc2072ae","integrity":"sha512-hbciAn07/eYQoIVBRnw0fAnrGwdAocqx4724L0HZdXgen9b+Gzo8H0cyIhFtB5VEEthzkKdYsTD8QdxBO4xG8g==","tarball":"https://registry.npmjs.org/v-agile/-/v-agile-0.0.1.tgz","fileCount":24,"unpackedSize":54166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6nDuCRA9TVsSAnZWagAAYhgP/RVMsQleUUE622cwd8Hf\nGFUjRquspZCYYreTIIl+CpYWRzjqNgqTz63lrIkBCBrnWN7NBQg+xVv3ZtzF\nu0Sn4+AKBN5UnGA52ls22S/aZqqptaMS6urGmo0z0+nXoLFKYkIuhKKELZO3\n5fZ+6Ma/hNejhmESWPHSut5X1Ixe0iDwv8amXe5bvLtt920a+iegzwS8uZEH\nnSwPk/66IzCh7wkNZz/Ju+xLRAMKOrbTgwSgvDjHMBx3XWWz4RPVE7/rF5xq\nq7fbeqZm4qxC5GdyBJIV1KqG6LRd1M5nLeQbJdzdhCAF4EzGJJaiOPZo4ifs\nz8eh38jxINTvhor3gN8VoBF74ug4SOS8dfH3sE+YY+eFZXhfhglgzMm+brdA\nDlQhLNy8quPJtncqbuP28/nK28JCOhEaLnllwSVGAeBMXHFIBr0rnXacZslR\nVUYXPqKYA8a3F3/a0BswYjIWA/RkRX4ghUX0egkWIsoA30YYoZkT3ymYeVAU\nXfFc+t9+gKd2sOv21KCBQi9Md5bd7CYeoh1XpElf1iEfWgMpPuUUD2n56i76\nONbzA9WHzpPnxeVBjDe5uTL1Vy/qQundwWc/mVP/yKwsWUhL18Ro2G3ttEJA\nZFlfiNp80HYBMnb0kgu+0nM6xqppjZbiL2BiSGEvoNjFKiemOzHfEJlSWQsa\nZxxV\r\n=E+Ts\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBUr7njTijtAyTD3vqVIDw8U4a7fR2aCwICPq79yNK0AiBbyO1rPzbx+snHiGO5/IJnDAb79ivdD03p5qlqqB4CAA=="}]},"_npmUser":{"name":"jambonnn","email":"hoa.nx.dev@gmail.com"},"directories":{},"maintainers":[{"name":"jambonnn","email":"hoa.nx.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/v-agile_0.0.1_1642754286617_0.31888991151751833"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-21T08:38:06.559Z","0.0.1":"2022-01-21T08:38:06.723Z","modified":"2022-05-23T01:07:05.741Z"},"maintainers":[{"name":"jambonnn","email":"hoa.nx.dev@gmail.com"}],"description":"A easy to use carousel component for Vue","keywords":["vue","carousel","slider","responsive","agile"],"repository":{"type":"git","url":"https://github.com/jambonn/v-agile.git"},"author":{"name":"Jambon","email":"hoa.nx.dev@gmail.com"},"bugs":{"url":"https://github.com/jambonn/v-agile/issues"},"license":"MIT","readme":"# v-agile\n> This is a customized version of [vue-agile](https://github.com/lukaszflorczak/vue-agile) with smaller bundle size and better performance.<br>\n\n**[Demo & examples](https://v-agile.vercel.app/)**\n\n## Installation\n\n```bash\nnpm install v-agile\n```\n\nor\n\n```bash\nyarn add v-agile\n```\n\n## Styles\n\n**The component is delivered without styles for the appearance of the navigation elements** (like dots color and shape, arrows position, etc.). I think most people use their own styles and default styles are completely redundant. If you\nwant, feel free to use styles from [CodePen demos](https://codepen.io/collection/AdRzJW/).\n\n## Importing\n\n#### Global\n\n```js\n// main.js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport VAgile from 'v-agile'\n\ncreateApp(App)\n  .use(VAgile)\n```\n\n#### In component\n\n```js\n// YourComponent.vue\nimport { Agile } from 'v-agile'\n\nexport default {\n  components: {\n    agile: Agile\n  }\n}\n```\n\n#### Via `<script>`\n\n```html\n<script src=\"https://unpkg.com/v-agile\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/v-agile/lib/v-agile.css\">\n```\n\n## Usage\n\n```vue\n<template>\n  <agile>\n    <div class=\"slide\">\n      <h3>slide 1</h3>\n    </div>\n\n    ...\n\n    <div class=\"slide\">\n      <h3>slide n</h3>\n    </div>\n  </agile>\n</template>\n```\n\nEvery first-level child of `<agile>` is a new slide. You also can group them inside `<template v-slot:default>...</template>` tags.\n\n## Options / Props\n\n| Parameter | Type | Default | Description |\n| --- | :---: | :---: | --- |\n| [asNavFor](#asNavFor) | array | `[]` | Set the carousel to be the navigation of other carousels |\n| autoplay | boolean | `false` | Enable autoplay |\n| autoplaySpeed | integer (ms) | `3000` | Autoplay interval in milliseconds |\n| centerMode | boolean | `false` | Enable centered view when `slidesToShow` > `1` |\n| changeDelay | integer (ms) | `0` | Insert a delay when switching slides. Useful for `fade`: `true` |\n| dots | boolean | `true` | Enable dot indicators/pagination |\n| fade | boolean | `false` | Enable fade effect |\n| infinite | boolean | `true` | Infinite loop sliding |\n| initialSlide | integer | `0` | Index of slide to start on |\n| mobileFirst | boolean | `true` | Enable mobile first calculation for responsive settings |\n| navButtons | boolean | `true` | Enable prev/next navigation buttons |\n| options | object | `null` | All settings as one object |\n| pauseOnDotsHover | boolean | `false` | Pause autoplay when a dot is hovered |\n| pauseOnHover | boolean | `true` | Pause autoplay when a slide is hovered |\n| [responsive](#Responsive) | object | `null` | Object containing breakpoints and settings objects |\n| rtl | boolean | `false` | Enable right-to-left mode |\n| slidesToShow | integer | `1` | Number of slides to show |\n| speed | integer (ms) | `300` | Slide animation speed in milliseconds |\n| swipeDistance | integer (px) | `50` | Distance to swipe the next slide |\n| throttleDelay | integer (ms) | `500` | Throttle delay for actions |\n| timing | string | `ease` | Transition timing function <br> (`linear`/`ease`/`ease-in`/`ease-out`/`ease-in-out`) |\n| unagile | boolean | `false` | Disable Agile carousel |\n\n#### Example\n\n```vue\n<agile :dots=\"false\" :infinite=\"false\" :autoplay-speed=\"5000\">...</agile>\n```\n\n**Important!** If you use props inline, convert props names from `camelCase` to `kebab-case`.\n\n## Methods\n\n| Name | Description |\n| --- | --- |\n| `getCurrentBreakpoint()` | Returns current breakpoint (can returns `0` in mobile first for the smallest breakpoint and `null` for desktop first for the largest) |\n| `getCurrentSettings()` | Returns settings object for current breakpoint – useful for debugging |\n| `getCurrentSlide()` | Returns index of current slide |\n| `getInitialSettings()` | Returns full settings object with all options – useful for debugging |\n| `goTo()` | Navigates to a slide by index |\n| `goToNext()` | Navigates to next slide |\n| `goToPrev()` | Navigate to previous slide |\n| `reload()` | Reload carousel & slides settings, classes and inline styles |\n\n#### Example\n\n```vue\n<agile ref=\"carousel\">...</agile>\n\n<button @click=\"$refs.carousel.goToNext()\">My custom button</button>\n```\n\n## Events\n\n| Name | Value | Description |\n| --- | --- | --- |\n| after-change | `{ currentSlide }` | Fires after slide change |\n| before-change | `{ currentSlide, nextSlide }` | Fires before slide change |\n| breakpoint | `{ breakpoint } ` | Fires after breakpoint change |\n\n#### Example\n\n```vue\n<agile @after-change=\"showCurrentSlide($event)\">...</agile>\n```\n\n```js\nshowCurrentSlide(event)\n{\n  console.log(event)\n  // Shows for example: { currentSlide: 1 }\n}\n```\n\n## Responsive\n\nTo customize responsiveness, I recommend defining your desired breakpoints and passing settings object with your modification options inside **options**.\n\n#### Example\n\n```vue\n<agile :options=\"myOptions\">...</agile>\n```\n\n```js\ndata()\n{\n  return {\n    myOptions: {\n      navButtons: false,\n      responsive: [\n        {\n          breakpoint: 600,\n          settings: {\n            dots: false\n          }\n        },\n\n        {\n          breakpoint: 900,\n          settings: {\n            navButtons: true,\n            dots: true,\n            infinite: false\n          }\n        }\n      ]\n    }\n  }\n}\n```\n\nHow does it work? Mobile first mode is used by default. It means, that `navButtons: false` option will be used on screens from 0 to 600 px width (+ all default carousel options). On screens from 600 to 900 px    `dots: false`    will be\nadded to options from breakpoint before. And on screens over 900 px width `navButtons` and `dots` options will be overwritten and `infinite: false` will be added.\n\n## Custom arrows / nav buttons\n\nFrom version `1.0` the component use slots for custom navigation buttons. It means you can put inside whatever you want – any HTML with text, image, icon etc.\n\n#### Example\n\n```vue\n<agile>\n... <!-- slides -->\n\n<template slot=\"prevButton\">prev</template>\n<template slot=\"nextButton\">next</template>\n</agile>\n```\n\n## Caption\n\nTo display a static caption or such like within the gallery, you can use the `caption` slot.\n\n#### Example\n\n```vue\n<agile @after-change=\"e => currentSlide = e.currentSlide\">\n  ... <!-- slides -->\n\n  <template slot=\"caption\">{{ captions[currentSlide] }}</template>\n</agile>\n\n<script>\n  export default {\n    data () {\n      return {\n        currentSlide: 0,\n        captions: [\n          'This is slide 1',\n          'This is the second slide',\n          'This is a third and final slide',\n        ]\n      }\n    }\n  }\n</script>\n```\n\n## asNavFor\n\nThis option is useful for example for creating a photo gallery with two related slider – one big with only one slide in view and second for navigation with thumbnails.\n\n#### Example\n\n```vue\n<agile ref=\"main\" :fade=\"true\">...</agile>\n\n<agile ref=\"thumbnails\" :as-nav-for=\"[$refs.main]\" :slides-to-show=\"4\" autoplay>...</agile>\n```\n\n**Important!** If you want to use the autoplay mode use it only in one of the related carousels.\n\n## `v-if` & `v-show`\n\nIf you have slides being dynamically loaded, use `v-if` to show the carousel after the slides are ready. Using `v-if` is also recommended in other situations if you want to hide/show the slideshow.\n\nIt is also possible to use `v-show`, but you have to use the `reload()` method.\n\n#### Example\n\n```vue\n<button @click=\"isActive = !isActive\">Toggle carousel</button>\n\n<agile v-if=\"isActive\">...</agile>\n```\n\n## Nuxt.js && SSR Support\n\nThe component uses browser specific attributes (like `window` and `document`). However, you can try to render the first view on server side.\n\n#### Example\n\n```js\n// plugins/v-agile.js\n\nimport Vue from 'vue'\nimport VAgile from 'v-agile'\n\nVue.use(VAgile)\n```\n\n```js\n// nuxt.config.js\n\nexport default {\n  plugins: ['~/plugins/v-agile'],\n\n  build: {\n    transpile: ['v-agile']\n  }\n}\n```\n\nTo use component without SSR use the `client-only` component:\n\n```vue\n<client-only placeholder=\"Loading...\">\n  <agile>...</agile>\n</client-only>\n```\n\n**Important!** Component rendered on server side has additional CSS class: `agile--ssr`, so you can use it to add some additional styles or manipulations. For example, I have limited options for setting the first appearance of the slides.\nBy default, the server renders the view and styles, where only the first slide is visible.\n\n```css\n.agile--ssr .agile__slides > * {\n  overflow: hidden;\n  width: 0\n}\n\n.agile--ssr .agile__slides > *:first-child {\n  width: 100%\n}\n```\n\nAt this stage slides don't have `agile__slide` class yet, so I use `> *` instead of this.\n\nIf you would like to connect this with params `slidesToShow` or `initialSlide` you have to add some custom styles with `nth-child` param.\n\n#### Example for `:slidesToShow=\"2\"`\n\n```sass\n.agile--ssr\n  .agile__slides\n    > *:nth-child(1),\n    > *:nth-child(2)\n      width: 50%\n```\n\n#### Example for `:initialSlide=\"1\"`\n\n(Slides index starts at `0`)\n\n```sass\n.agile--ssr\n  .agile__slides\n    > *:nth-child(1)\n      width: 0\n\n    > *:nth-child(2)\n      width: 100%\n```\n","readmeFilename":"README.md"}