{"id":13565143,"url":"https://github.com/s950329/vue-owl-carousel","last_synced_at":"2025-07-09T15:02:42.985Z","repository":{"id":33155969,"uuid":"153446759","full_name":"s950329/vue-owl-carousel","owner":"s950329","description":"Vue component for Owl Carousel 2","archived":false,"fork":false,"pushed_at":"2022-12-03T03:37:18.000Z","size":181,"stargazers_count":166,"open_issues_count":49,"forks_count":105,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-03T00:20:38.684Z","etag":null,"topics":[],"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/s950329.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-10-17T11:39:29.000Z","updated_at":"2025-01-21T18:14:54.000Z","dependencies_parsed_at":"2023-01-14T23:42:48.879Z","dependency_job_id":null,"html_url":"https://github.com/s950329/vue-owl-carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/s950329/vue-owl-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s950329%2Fvue-owl-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s950329%2Fvue-owl-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s950329%2Fvue-owl-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s950329%2Fvue-owl-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s950329","download_url":"https://codeload.github.com/s950329/vue-owl-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s950329%2Fvue-owl-carousel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260355367,"owners_count":22996463,"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":[],"created_at":"2024-08-01T13:01:41.672Z","updated_at":"2025-07-09T15:02:42.869Z","avatar_url":"https://github.com/s950329.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Carousel"],"readme":"\n[![npm](https://img.shields.io/npm/dt/vue-owl-carousel.svg)](https://www.npmjs.com/package/vue-owl-carousel)\n\n  ---\n\n## Intro\n\n\n\n- The [VueJS](https://vuejs.org/) wrapper for [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/).\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- Extended from [vue-owl-carousel](https://github.com/s950329/vue-owl-carousel)\n\n\n## Installation\n\n\n\n`npm i -s vue-owl-carousel` or `yarn add vue-owl-carousel`\n\n## Usage\n\n```\n\u003cscript\u003e\n\nimport carousel from 'vue-owl-carousel'\n\nexport default {\n    components: { carousel },\n}\n\n\u003c/script\u003e\n```\n\nBasic Usage\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\nCustom prev and next buttons using slot, the buttons will be hidden while start and end in non-loop mode\n\n```\n\u003ccarousel\u003e\n\n    \u003ctemplate slot=\"prev\"\u003e\u003cspan class=\"prev\"\u003eprev\u003c/span\u003e\u003c/template\u003e\n\n    //\n\n    \u003ctemplate slot=\"next\"\u003e\u003cspan class=\"next\"\u003enext\u003c/span\u003e\u003c/template\u003e\n\n\u003c/carousel\u003e\n```\n\nSet options,\n\n```\n\u003ccarousel :autoplay=\"true\" :nav=\"false\"\u003e\n\n//\n\n\u003c/carousel\u003e\n```\n\nSet events,\n\n```\n\u003ccarousel @changed=\"changed\" @updated=\"updated\"\u003e\n\n//\n\n\u003c/carousel\u003e\n```\n\n## Available options\n\nCurrently following options are available.\n\n- ### items\n\ntype : `number`\n\ndefault : `3`\n\nThe number of items you want to see on the screen.\n\n- ### margin\n\ntype : `number`\n\ndefault : `0`\n\nMargin-right (px) on item.\n\n- ### loop\n\n\ntype : `boolean`\n\ndefault : `false`\n\nInfinity loop. Duplicate last and first items to get loop illusion.\n\n- #### center\n\nType: `Boolean`\n\nDefault: `false`\n\nCenter item. Works well with even an odd number of items.\n\n- #### nav\n\nType: `Boolean`\n\nDefault: `false`\n\nShow next/prev buttons.\n\n- #### autoplay\n\nType: `Boolean`\n\nDefault: `false`\n\nAutoplay.\n\n- #### autoplaySpeed\n\nType: `Number/Boolean`\n\nDefault: `false`\n\nAutoplay speed.\n\n- #### rewind\n\nType: `Boolean`\n\nDefault: `true`\n\nGo backwards when the boundary has reached.\n\n- #### mouseDrag\n\nType: `Boolean`\n\nDefault: `true`\n\nMouse drag enabled.\n\n- #### touchDrag\n\nType: `Boolean`\n\nDefault: `true`\n\nTouch drag enabled.\n\n- #### pullDrag\n\nType: `Boolean`\n\nDefault: `true`\n\nStage pull to edge.\n\n- #### freeDrag\n\nType: `Boolean`\n\nDefault: `false`\n\nItem pull to edge.\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## Available events\n\nThe trigger timing can see [Owl Carousel document](https://owlcarousel2.github.io/OwlCarousel2/demos/events.html)\n\n- initialize\n- initialized\n- resize\n- resized\n- refresh\n- refreshed\n- update\n- updated\n- drag\n- dragged\n- translate\n- translated\n- to\n- changed\n\n## :collision: NPM\n\n[![NPM](https://nodei.co/npm/vue-owl-carousel.png)](https://www.npmjs.com/package/vue-owl-carousel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs950329%2Fvue-owl-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs950329%2Fvue-owl-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs950329%2Fvue-owl-carousel/lists"}