{"id":14973784,"url":"https://github.com/93gaurav93/v-owl-carousel","last_synced_at":"2025-10-27T02:31:32.459Z","repository":{"id":31888000,"uuid":"130495320","full_name":"93gaurav93/v-owl-carousel","owner":"93gaurav93","description":"🦉 VueJS wrapper for Owl Carousel","archived":false,"fork":false,"pushed_at":"2022-12-02T02:08:43.000Z","size":785,"stargazers_count":44,"open_issues_count":18,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-28T18:01:29.149Z","etag":null,"topics":["carousel","carousel-component","carousel-plugin","jquery","owl-carousel","vue","vue-component","vue-components","vuejs","vuejs2","wrapper"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/93gaurav93.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-21T17:11:02.000Z","updated_at":"2023-08-13T01:15:32.000Z","dependencies_parsed_at":"2023-01-14T20:01:21.253Z","dependency_job_id":null,"html_url":"https://github.com/93gaurav93/v-owl-carousel","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/93gaurav93%2Fv-owl-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/93gaurav93%2Fv-owl-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/93gaurav93%2Fv-owl-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/93gaurav93%2Fv-owl-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/93gaurav93","download_url":"https://codeload.github.com/93gaurav93/v-owl-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219861968,"owners_count":16555980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","carousel-component","carousel-plugin","jquery","owl-carousel","vue","vue-component","vue-components","vuejs","vuejs2","wrapper"],"created_at":"2024-09-24T13:49:24.451Z","updated_at":"2025-10-27T02:31:27.172Z","avatar_url":"https://github.com/93gaurav93.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![npm](https://img.shields.io/npm/dt/v-owl-carousel.svg)](https://www.npmjs.com/package/v-owl-carousel)\n\n  ---\n\n## Intro\n\n\n\n\n\n- The [VueJS](https://vuejs.org/) wrapper for [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/).\n\n\n\n\n\n- [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.\n\n\n\n\n\n\n## Installation\n\n\n\n\n\n`npm i v-owl-carousel` or `yarn add v-owl-carousel`\n\n\n\n## Usage\n\n\n`import carousel from 'v-owl-carousel'`\n\n\n```\n\n\u003ccarousel\u003e\n\n  \u003cimg src=\"https://placeimg.com/200/200/any?1\"\u003e\n\n  \u003cimg src=\"https://placeimg.com/200/200/any?2\"\u003e\n\n  \u003cimg src=\"https://placeimg.com/200/200/any?3\"\u003e\n\n  \u003cimg src=\"https://placeimg.com/200/200/any?4\"\u003e\n\n\u003c/carousel\u003e\n\n```\n\nSet options,\n\n```\n\n\u003ccarousel :autoplay=\"true\" :nav=\"false\"\u003e\n\n//\n\n//\n\n\u003c/carousel\u003e\n\n```\n\nSet events,\n\n```\n\n\u003ccarousel @change=\"doSomething\"\u003e\n\n//\n\n//\n\n\u003c/carousel\u003e\n\n```\n\n\n## Usage in Nuxt.js\n\n`npm i v-owl-carousel`\n\nThen in your plugins/ directory, create a new file owl.js:\n\n```javascript\n\nimport Vue from 'vue'\nimport OwlCarousel from 'v-owl-carousel'\n\nVue.component('carousel', OwlCarousel)\n\n```\n\n\nThen in nuxt.config.js:\n\n\n```javascript\n\nplugins: [\n  {src: 'plugins/owl.js', ssr: false} // Only works on client side\n], ...\n\n```\n\nAnd finally in the page or component:\n\n```html\n\n\u003cno-ssr\u003e \u003c!-- important to add no-ssr--\u003e\n\n  \u003ccarousel :options\u003e\n\n    ...content\n\n  \u003c/carousel\u003e\n\n\u003c/no-ssr\u003e\n\n```\n\n\n## Available options\n\n\n\n\n\nCurrently following options are available.\n\n\n\n##### *(More to come)*\n\n\n\n\n\n- ### items\n\n\n\n\n\ntype : `number`\n\n\n\n\ndefault : `3`\n\n\n\n\nThe number of items you want to see on the screen.\n\n\n\n\n\n- ### margin\n\n\n\n\n\ntype : `number`\n\n\n\n\ndefault : `0`\n\n\n\n\nMargin-right (px) on item.\n\n\n\n\n\n- ### loop\n\n\n\n\n\ntype : `boolean`\n\n\n\n\ndefault : `false`\n\n\n\n\nInfinity loop. Duplicate last and first items to get loop illusion.\n\n\n\n\n\n- #### center\n\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `false`\n\n\n\n\n\nCenter item. Works well with even an odd number of items.\n\n\n\n\n\n- #### nav\n\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `false`\n\n\n\n\nShow next/prev buttons.\n\n\n\n\n\n- #### autoplay\n\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `false`\n\n\n\n\nAutoplay.\n\n\n\n\n\n- #### autoplaySpeed\n\n\n\n\n\nType: `Number/Boolean`\n\n\n\n\nDefault: `false`\n\n\n\n\nAutoplay speed.\n\n\n\n\n\n- #### rewind\n\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `true`\n\n\n\n\nGo backwards when the boundary has reached.\n\n\n\n\n- #### mouseDrag\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `true`\n\n\n\n\nMouse drag enabled.\n\n\n\n\n- #### touchDrag\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `true`\n\n\n\n\nTouch drag enabled.\n\n\n\n\n- #### pullDrag\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `true`\n\n\n\n\n\nStage pull to edge.\n\n\n\n\n- #### freeDrag\n\n\n\n\nType: `Boolean`\n\n\n\n\nDefault: `false`\n\n\n\n\nItem pull to edge.\n\n\n\n- #### stagePadding\n\nType: `Number`\n\nDefault: `0`\n\nPadding left and right on stage (can see neighbours).\n\n- #### autoWidth\n\nType: `Boolean`\n\nDefault: `false`\n\nSet non grid content. Try using width style on divs.\n\n- #### autoHeight\n\nType: `Boolean`\n\nDefault: `false`\n\nSet non grid content. Try using height style on divs.\n\n- #### dots\n\nType: `Boolean`\n\nDefault: `true`\n\nShow dots navigation.\n\n- #### autoplayTimeout\n\nType: `Number`\n\nDefault: `5000`\n\nAutoplay interval timeout.\n\n- #### autoplayHoverPause\n\nType: `Boolean`\n\nDefault: `false`\n\nPause on mouse hover.\n\n- #### responsive\n\nType: `Object`\n\nDefault: `{}`\n\nExample : `:responsive=\"{0:{items:1,nav:false},600:{items:3,nav:true}}\"`\n\nObject containing responsive options. Can be set to false to remove responsive capabilities.\n\n\n\n## Events\n\n- ### change\n  Emitter: carousel\n\n  Description: Emits when carousel has changed (changed.owl.carousel)\n\n\n## :collision: NPM\n\n\n\n\n\n[![NPM](https://nodei.co/npm/v-owl-carousel.png)](https://www.npmjs.com/package/v-owl-carousel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F93gaurav93%2Fv-owl-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F93gaurav93%2Fv-owl-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F93gaurav93%2Fv-owl-carousel/lists"}