{"id":32956166,"url":"https://github.com/jambonn/vue-concise-carousel","last_synced_at":"2026-01-22T20:35:18.554Z","repository":{"id":45784181,"uuid":"296602772","full_name":"jambonn/vue-concise-carousel","owner":"jambonn","description":"Vue Concise Carousel with True SSR Written for Jambon","archived":false,"fork":false,"pushed_at":"2024-03-26T10:53:51.000Z","size":955,"stargazers_count":24,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"next","last_synced_at":"2025-08-08T18:14:06.837Z","etag":null,"topics":["carousel","concise","csr","pwa","slider","ssr","vue"],"latest_commit_sha":null,"homepage":"https://jambonn.github.io/vue-concise-carousel","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/jambonn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-18T11:34:27.000Z","updated_at":"2024-10-23T22:08:48.000Z","dependencies_parsed_at":"2024-01-02T23:29:37.071Z","dependency_job_id":"900f5961-89c6-4e9e-9980-13fb83689832","html_url":"https://github.com/jambonn/vue-concise-carousel","commit_stats":{"total_commits":52,"total_committers":4,"mean_commits":13.0,"dds":0.3846153846153846,"last_synced_commit":"fe83d05af1881aade8c6610ec18dcbdcd1b807ba"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"purl":"pkg:github/jambonn/vue-concise-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jambonn%2Fvue-concise-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jambonn%2Fvue-concise-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jambonn%2Fvue-concise-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jambonn%2Fvue-concise-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jambonn","download_url":"https://codeload.github.com/jambonn/vue-concise-carousel/tar.gz/refs/heads/next","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jambonn%2Fvue-concise-carousel/sbom","scorecard":{"id":503333,"data":{"date":"2025-08-11","repo":{"name":"github.com/jambonn/vue-concise-carousel","commit":"fe83d05af1881aade8c6610ec18dcbdcd1b807ba"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 1/20 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during GetBranch(master): error during branchesHandler.query: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 14 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"31 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-mv48-hcvh-8jj8","Warn: Project is vulnerable to: GHSA-353f-5xf4-qw67","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T22:35:58.859Z","repository_id":45784181,"created_at":"2025-08-19T22:35:58.860Z","updated_at":"2025-08-19T22:35:58.860Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28670385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T19:36:09.361Z","status":"ssl_error","status_checked_at":"2026-01-22T19:36:05.567Z","response_time":144,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","concise","csr","pwa","slider","ssr","vue"],"created_at":"2025-11-12T23:00:19.021Z","updated_at":"2026-01-22T20:35:18.539Z","avatar_url":"https://github.com/jambonn.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# vue-concise-carousel\n\u003e Vue Concise Carousel is SSR and CSR friendly.\n\u003e An upgraded version from [vue-carousel](https://github.com/SSENSE/vue-carousel)\n\nVue 3 support is almost here with the vue-concise-carousel 2 rewrite. Check out the [next](https://github.com/jambonn/vue-concise-carousel/tree/next) branch to see the latest progress.\n\n**[Full examples](https://jambonn.github.io/vue-concise-carousel/#example-full)**\n\n## Table of Contents\n- [Installation](#installation)\n- [Usage](#usage)\n- [Configuration](#configuration)\n- [Events](#events)\n- [Methods](#methods)\n- [Slots](#slots)\n- [Development](#compiles-and-hot-reloads-for-development)\n- [License](#license)\n\n## Installation\n\n``` bash\nnpm install @jambonn/vue-concise-carousel@next\n```\n\nor if you prefer yarn\n\n``` bash\nyarn add @jambonn/vue-concise-carousel@next\n```\n\n## Usage\n\n### Global\n\nYou may install Vue Concise Carousel globally:\n\n``` js\nimport Vue from 'vue';\nimport { Carousel, Slide } from '@jambonn/vue-concise-carousel';\nimport '@jambonn/vue-concise-carousel/lib/vue-concise-carousel.css'\n\nVue.component('carousel', Carousel);\nVue.component('slide', Slide);\n```\nThis will make **\u0026lt;carousel\u0026gt;** and **\u0026lt;slide\u0026gt;** available to all components within your Vue app.\n\n### Local\n\nInclude the carousel directly into your component using import:\n\n``` js\nimport { Carousel, Slide } from '@jambonn/vue-concise-carousel';\nimport '@jambonn/vue-concise-carousel/lib/vue-concise-carousel.css'\n\nexport default {\n ...\n components: {\n Carousel,\n Slide\n }\n ...\n};\n```\n\n## Configuration\n| Property | Type | Default | Description |\n|:----------------------------|:--------------|:--------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| adjustableHeight | Boolean | false | Adjust the height of the carousel for the current slide. \n| adjustableHeightEasing | String | | Slide transition easing for adjustableHeight. Any valid CSS transition easing accepted. \n| autoplay | Boolean | false | Flag to enable autoplay. |\n| autoplayDirection | String | forward | Sets the autoplay direction for the carousel during autoplay. By default it is forward but can also be set to backward. If an incorrect string is supplied it will default to forward. |\n| autoplayHoverPause | Boolean | true | Flag to pause autoplay on hover. |\n| autoplayTimeout | Number | 2000 | Time elapsed before advancing slide in autoplay. |\n| centerMode | Boolean | false | Center images when the size is less than the container width. |\n| easing | String | ease | Slide transition easing. Any valid CSS transition easing accepted. |\n| loop | Boolean | false | Flag to make the carousel loop around when it reaches the end. |\n| minSwipeDistance | Number | 8 | Minimum distance for the swipe to trigger a slide advance. |\n| mouseDrag | Boolean | true | Flag to toggle mouse dragging. |\n| navigateTo | Number, Array | 0 | Listen for an external navigation request using this prop. When the supplied prop is of type Number the slide with the matching index is animated into view, however you can disable this animation by supplying an Array consisting of exactly two element: the new slide index and a boolean indication whether the change should be animated or not (eg. [3, false] would mean \"go to the slide with index 3 without animation\"). |\n| navigationClickTargetSize | Number | 8 | Amount of padding to apply around the label in pixels. |\n| navigationEnabled | Boolean | false | Flag to render the navigation component (next/prev buttons). |\n| navigationNextLabel | String | ▶ | Text content of the navigation next button. |\n| navigationPrevLabel | String | ◀ | Text content of the navigation prev button. |\n| paginationActiveColor | String | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted. |\n| paginationColor | String | #efefef | The fill color of pagination dots. Any valid CSS color is accepted. |\n| paginationPosition | String | bottom | The position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images. |\n| paginationEnabled | Boolean | true | Flag to render pagination component. |\n| paginationPadding | Number | 10 | The padding inside each pagination dot. Pixel values are accepted. |\n| paginationSize | Number | 10 | The size of each pagination dot. Pixel values are accepted. |\n| perPage | Number | 2 | Maximum number of slides displayed on each page. |\n| perPageCustom | Array | | Configure the number of visible slides with a particular browser width. This will be an array of arrays, ex. [[320, 2], [1199, 4]]. Formatted as [x, y] where x=browser width, and y=number of slides displayed. Ex. [1199, 4] means if (window \u003e= 1199) then show 4 slides per page. |\n| resistanceCoef | Number | 20 | Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries. |\n| scrollPerPage | Boolean | true | Scroll per page, not per item. |\n| spacePadding | Number | 0 | Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner. |\n| spacePaddingMaxOffsetFactor | Number | 0 | Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding. |\n| speed | Number | 500 | Slide transition speed. Number of milliseconds accepted. |\n| tagName | String | slide | Name (tag) of slide component. Overwrite with coponent name when extending slide component. |\n| touchDrag | Boolean | true | Flag to toggle touch dragging. |\n| value | Number | | Support for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount). |\n| maxPaginationDotCount | Number | -1 | Support Max pagination dot amount |\n| rtl | Boolean | false | Support right to left |\n| keyboard | Boolean | false | Navigate slide using keyboard |\n| resizeObserver | Boolean | false | Use ResizeObserver |\n\n\n## Events\n| Event | Type | Emitter | Description |\n|:------------------------------|:-------|:---------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n| `navigation-click` | | Carousel | Emits when the a navigation button is clicked, with the current direction (`backward` or `forward`) |\n| `pagination-click` | | Carousel | Emits when a pagination button is clicked, with the current `pageNumber` |\n| `page-change` | Number | Carousel | Emits with the current page number. |\n| `slide-click` | Object | Slide | Emits with the *dataset* object of the selected element ·· \n| `transition-start` | | Carousel | Emits when the transition end is reached |\n| `transition-end` | | Carousel | Emits when the transition start is reached · |\n| `mounted` | | Carousel | Emits when carousel ready · |\n\nLowercase versions of the above events are also emitted, namely—`pagechange`, `slideclick`, `transitionstart` and `transitionend`.\n\n### HTML Structure\n\nOnce the **Carousel** and **Slide** components are installed globally or imported, they can be used in templates in the following manner:\n\n``` vue\n \u003cCarousel :per-page=\"1\" :navigate-to=\"someLocalProperty\" :mouse-drag=\"false\"\u003e\n \u003cSlide\u003e\n Slide 1 Content\n \u003c/Slide\u003e\n \u003cSlide\u003e\n Slide 2 Content\n \u003c/Slide\u003e\n \u003c/Carousel\u003e\n```\n\nTo listen for the 'slide-click' event you can do the following:\n\n``` vue\n \u003cCarousel\u003e\n \u003cSlide\n data-index=\"0\"\n data-name=\"MySlideName\"\n @slide-click=\"handleSlideClick\"\u003e\n Slide 1 Content\n \u003c/Slide\u003e\n ...\n \u003c/Carousel\u003e\n```\n\n``` js\n handleSlideClick (dataset) =\u003e {\n console.log(dataset.index, dataset.name)\n }\n```\n\n## Methods\n\n### Calling Methods\n\n```html\n\u003ctemplate\u003e\n \u003cCarousel ref=\"carousel\"\u003e\n \u003cSlide\u003e\n Slide 1 Content\n \u003c/Slide\u003e\n \u003cSlide\u003e\n Slide 2 Content\n \u003c/Slide\u003e\n \u003c/Carousel\u003e\n \u003cbutton @click=\"showNext\"\u003eshow me the next\u003c/button\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n export default {\n methods: {\n showNext() {\n this.$refs.carousel.handleNavigation('forward')\n },\n },\n }\n\u003c/script\u003e\n```\n### All Methods\n\n| Method name | Description | Returns | Parameters | Default |\n|------------------| -------------------------------------------------------------------- | ------- | ---------------------------------------- | ------- |\n| handleNavigation | go to the next or previous slide | - | direction: forward or backward | - |\n| goToPage | go to slide index | - | slide:Number - slide number | null |\n| restartAutoplay | restarts the autoplay | - | | |\n| pauseAutoplay | pauses the autoplay | - | | |\n\n## Slots\n\n### Customizing Navigation \u0026 Pagination\n\n```html\n\u003ctemplate\u003e\n \u003cCarousel ref=\"carousel\" @page-change=\"handlePageChange\"\u003e\n \u003cSlide\u003e\n Slide 1 Content\n \u003c/Slide\u003e\n \u003cSlide\u003e\n Slide 2 Content\n \u003c/Slide\u003e\n \u003cdiv class=\"custom-navigation\" slot=\"navigation\"\u003e\n \u003cbutton type=\"button\" :disabled=\"currentPage \u003e 0\" @click=\"onChangeNavigation('backward')\"\u003eBack\u003c/button\u003e\n \u003cbutton type=\"button\" :disabled=\"!isEnableForward\" @click=\"onChangeNavigation('forward')\"\u003eNext\u003c/button\u003e\n \u003c/div\u003e\n \u003cul class=\"custom-pagination\" slot=\"pagination\"\u003e\n \u003cli @click=\"onChangePagination(1)\"\u003e1\u003c/li\u003e\n \u003cli @click=\"onChangePagination(2)\"\u003e2\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/Carousel\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n export default {\n data() {\n return {\n currentPage: 0,\n isEnableForward: true,\n }\n },\n methods: {\n handlePageChange(currentPage) {\n this.currentPage = currentPage\n this.isEnableForward = this.$refs.carousel.canAdvanceForward\n },\n onChangePagination(index) {\n this.$refs.carousel.goToPage(index, 'pagination')\n },\n onChangeNavigation(direction) {\n this.$refs.carousel.handleNavigation(direction)\n },\n },\n }\n\u003c/script\u003e\n```\n\n### All Slots\n\n| Name | Description | Method |\n|------------| ------------------------------------- | -------------------------------------------- |\n| pagination | Custom pagination | goToPage(currentSlide: Number) |\n| | | |\n| navigation | Custom navigation | handleNavigation(direction: String) |\n| | | |\n\n### Compiles and hot-reloads for development\n``` bash\nyarn install\nyarn dev\n```\nthen navigate to `http://localhost:8080`\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n## License\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjambonn%2Fvue-concise-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjambonn%2Fvue-concise-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjambonn%2Fvue-concise-carousel/lists"}