{"id":26343694,"url":"https://github.com/kalesh13/z-carousel","last_synced_at":"2026-05-17T17:07:48.311Z","repository":{"id":57404998,"uuid":"188669535","full_name":"kalesh13/z-carousel","owner":"kalesh13","description":"A simple, high-performance and cross-browser jQuery text rotator and carousel plugin for Vue. The plugin supports usage of Animate.css animations.","archived":false,"fork":false,"pushed_at":"2019-05-27T05:29:30.000Z","size":158,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-05T09:32:42.548Z","etag":null,"topics":["animatecss","carousel-plugin","css-animations","html","image-rotator","javascript","jquery-plugin","text-animation","text-rotation","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kalesh13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-26T10:34:58.000Z","updated_at":"2022-10-24T20:51:20.000Z","dependencies_parsed_at":"2022-09-26T17:01:40.845Z","dependency_job_id":null,"html_url":"https://github.com/kalesh13/z-carousel","commit_stats":null,"previous_names":["kalesh13/z-carousal"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/kalesh13/z-carousel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalesh13%2Fz-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalesh13%2Fz-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalesh13%2Fz-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalesh13%2Fz-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kalesh13","download_url":"https://codeload.github.com/kalesh13/z-carousel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalesh13%2Fz-carousel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33147340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["animatecss","carousel-plugin","css-animations","html","image-rotator","javascript","jquery-plugin","text-animation","text-rotation","vuejs"],"created_at":"2025-03-16T05:17:48.311Z","updated_at":"2026-05-17T17:07:48.283Z","avatar_url":"https://github.com/kalesh13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# z-Carousel [![GitHub release](https://img.shields.io/github/release/kalesh13/z-Carousel.svg)](https://github.com/kalesh13/z-Carousel/releases) [![npm version](https://badge.fury.io/js/z-carousel.svg)](https://badge.fury.io/js/z-carousel)\nA simple, high-performance and cross-browser jQuery text rotator and carousel plugin for Vue.js. The plugin supports usage of Animate.css animations.\n\n### Prerequisites\n\nz-Carousel is a jQuery based plugin. So, please make sure that jQuery is installed and has been initialized before z-Carousel is initialized.\n\nInstall jQuery via npm:\n\n```\nnpm install --save-dev jquery\n```\n\nz-Carousel by default uses jQuery's ```fadeIn``` animation. [Animate.css](https://github.com/daneden/animate.css) has to be installed if you want to use a custom animation.\n\nInstall Animate.css via npm:\n\n```\nnpm install --save-dev animate.css\n```\n\nz-Carousel also supports carousel pagination which uses a [FontAwesome](https://github.com/FortAwesome/Font-Awesome) icon by default. Install FontAwesome to use the default pagination style. You can skip FontAwesome installation, if pagination is not required or if you want to custom style the pagination icons.\n\nInstall FontAwesome via npm:\n\n```\nnpm install --save-dev font-awesome\n```\n\n## Installation\n\n**Install via npm:**\n\n```\nnpm install --save-dev z-carousel\n```\n\n**Or, Standalone installation**\n\n* Download the file from [here](https://raw.githubusercontent.com/kalesh13/z-Carousel/master/build/index.js)\n* Save the downloaded file in your server.\n* Import the file in your application using ```\u003cscript src=\"path_to_downloaded_file\"\u003e\u003c/script\u003e```\n* Plugin initialization is given at the bottom of Usage section.\n\n## Usage\n\nz-Carousel is easy to implement in your existing applications.\n\n**HTML Sample**\n\n```\n\u003cdiv class=\"z-carousel-wrapper\"\u003e\n    \u003cdiv class=\"z-carousel\" data-delay=\"2000\" data-interval=\"4000\"\u003e\n        \u003cul\u003e\n            \u003cli style=\"display:none;\"\u003e\n                Beautiful templates, super-fast turnaround, and awesome staff. Thank you Send2Sell for helping close my listings!\n            \u003c/li\u003e\n            \u003cli style=\"display:none;\"\u003e\n                I love Send2Sell! I use the service for all of my listings and get so much interest after each email blast.\n            \u003c/li\u003e\n        \u003c/ul\u003e        \n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n* Carousel pagination, if required, is added by the plugin as the last child element of ```z-carousel-wrapper``` container. So, it is adviced to keep the carousel element list within this container.\n\n* A single page can have multiple carousel elements and z-Carousel will handle each carousel differently. z-Carousel looks for all the elements in the DOM with ```z-carousel``` class and register a carousel for the element.\n\n* Set the ```li``` items to have ```display:none;``` style. This is to make sure that the UI does not look bad  before the initilization of the plugin.\n\n* As you can see, the element with ```z-carousel```  is where we define the various customization options. Following are the data fields and their default values used in the plugin to customise the carousel.\n\n| Data   | Default | Description |\n| :------ | :-------: | :----------- |\n| data-pagination | false | Set this field ```data-pagination='true'``` to show carousel pagination |\n| data-delay | 2000ms | Define the initial delay after which the carousel rotation should begin. For initial delay of 5 seconds, set ```data-delay='5000'``` as in ```\u003cdiv class='z-carousel' data-delay='5000'\u003e``` |\n| data-interval | 3000ms | This property determines, how long an item has to be displayed. For displaying an item for 3.5 seconds, set ```data-interval='3500'``` |\n| data-speed | 600ms | This is the speed at which jQuery's ```fadeIn``` completes animation. If the animation has to be completed in 1 second, set ```data-speed='1000'```. This data does nothing, if a custom animation is used. |\n| data-enter-animation | *Uses jQuery's fadeIn animation* | Define this property to use a custom animation provided by Animate.css. To have a ```bounceIn``` animation, set ```data-enter-animation='bounceIn'```. To use the Animate.css ```slow``` class, set ```data-enter-animation='bounceIn slow'```. Similarly, all the Animate.css speed classes can be used. |\n\n**Plugin Initialization**\n\n* In Vue.js components or in ES6 scripts, import the plugin using ```import zCarousel from \"z-carousel\"```\n* Initialise the plugin using ```zCarousel.registerCarousels();```\n\nFor example, in Vue.js component\n```\n//\n// you can use any variable name for the import.\n//\nimport carousel from \"z-carousel\"\n\nexport default{\n    mounted:function(){\n        carousel.registerCarousels();\n    }\n}\n```\n\n**Plugin Initialization of Standalone Installation**\n\n```\n\u003cscript type='text/javascript'\u003e\n    $(function() {                \n        zCarousel.registerCarousels();\n    });\n\u003c/script\u003e\n```\n\n## Authors\n\n* **[Kalesh Kaladharan](https://github.com/kalesh13)** - **Send2Sell Inc**\n\nSee also the list of [contributors](https://github.com/kalesh13/z-Carousel/contributors) who participated in this project.\n\n## License\n\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%2Fkalesh13%2Fz-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalesh13%2Fz-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalesh13%2Fz-carousel/lists"}