https://github.com/technikhil314/carousel-web-component

A tiny(~1.2Kb), framework agnostic, light weight, zero dependancy, touch friendly carousel component
https://github.com/technikhil314/carousel-web-component

carousel slides webcomponent webcomponents

Last synced: 5 months ago
JSON representation

A tiny(~1.2Kb), framework agnostic, light weight, zero dependancy, touch friendly carousel component

• Host: GitHub
• URL: https://github.com/technikhil314/carousel-web-component
• Owner: technikhil314
• License: mit
• Created: 2020-06-30T17:16:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T04:13:38.000Z (over 2 years ago)
• Last Synced: 2024-10-29T21:02:54.412Z (8 months ago)
• Topics: carousel, slides, webcomponent, webcomponents
• Language: JavaScript
• Homepage:
• Size: 2.41 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Carousel Web Component

[//]: <> (start placeholder for auto-badger)

[![Build Status](https://img.shields.io/travis/technikhil314/carousel-web-component.svg?style=flat-square&color=%23007a1f)](https://travis-ci.org/technikhil314/carousel-web-component)

[![version](https://img.shields.io/npm/v/carousel-webcomponent.svg?style=flat-square)](https://npmjs.org/carousel-webcomponent)

[![min size](https://img.shields.io/bundlephobia/min/carousel-webcomponent)](https://bundlephobia.com/result?p=carousel-webcomponent)

[![mingzip size](https://img.shields.io/bundlephobia/minzip/carousel-webcomponent)](https://bundlephobia.com/result?p=carousel-webcomponent)

[![license](https://img.shields.io/npm/l/carousel-webcomponent?color=%23007a1f)](https://github.com/technikhil314/carousel-web-component/blob/master/LICENSE)

[![dependancies](https://img.shields.io/librariesio/release/npm/carousel-webcomponent?color=%23007a1f)](https://libraries.io/npm/carousel-webcomponent)

[![downloads](https://img.shields.io/npm/dm/carousel-webcomponent)](https://npmcharts.com/compare/carousel-webcomponent)

[![all contributors](https://img.shields.io/github/all-contributors/technikhil314/carousel-web-component)](https://github.com/technikhil314/carousel-web-component/graphs/contributors)

[![code of conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/technikhil314/carousel-web-component/blob/master/CODE_OF_CONDUCT.md)

[![chat with community](https://img.shields.io/gitter/room/technikhil314/carousel-web-component?color=%23007a1f)](https://gitter.im/carousel-web-component)

[![stargazers](https://img.shields.io/github/stars/technikhil314/carousel-web-component?style=social)](https://github.com/technikhil314/carousel-web-component/stargazers)

[![number of forks](https://img.shields.io/github/forks/technikhil314/carousel-web-component?style=social)](https://github.com/technikhil314/carousel-web-component/fork)

[![Follow technikhil314 on twiter](https://img.shields.io/twitter/follow/technikhil314?label=Follow)](https://www.twitter.com/technikhil314)

:clap: & :heart: to [auto badger](https://github.com/technikhil314/auto-badger) for making badging simple

[//]: <> (end placeholder for auto-badger)

#### **A tiny(1.2Kb), framework agnostic, light weight, zero dependancy, touch friendly carousel component**

## Why?

Most of the carousel components out there do not leverage latest css and javascript features like css scroll snap, flex order and webcomponents etc. Using these features makes carousel much more eligent, reliable, light weight and framework agnostic

## Disclaimers

- This is still a WIP. Feel free to contribute.

- This is a webcomponent make sure you are not running on old browsers (by that I mostly mean Internet exploer). If you want to use it in old browser that do not support webcomponents please include [webcomponent polyfill from here](https://www.webcomponents.org/polyfills)

- This package is ideal and best suitable for static sites. The support for dynamic content on carousel is in roadmap

## Browser campatibility

| ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)    | ![Mobile](https://developer.mozilla.org/static/platforms/mobile.d9737f9e22aa.svg)              | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)       | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)                                                   | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg) | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)    | ![Mobile](https://developer.mozilla.org/static/platforms/mobile.d9737f9e22aa.svg)          | ![Desktop](https://developer.mozilla.org/static/platforms/desktop.d6def92f82da.svg)         |

| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |

| ![Chrome](https://raw.github.com/alrra/browser-logos/main/src/chrome/chrome_32x32.png) | ![Android Chrome](https://raw.github.com/alrra/browser-logos/main/src/chrome/chrome_32x32.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/main/src/firefox/firefox_32x32.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/main/src/archive/internet-explorer_9-11/internet-explorer_9-11_32x32.png) | ![Opera](https://raw.github.com/alrra/browser-logos/main/src/opera/opera_32x32.png) | ![Safari](https://raw.github.com/alrra/browser-logos/main/src/safari/safari_32x32.png) | ![Ios Safari](https://raw.github.com/alrra/browser-logos/main/src/safari/safari_32x32.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_32x32.png) |

| 69+ :heavy_check_mark:                                                                 | 81+ :heavy_check_mark:                                                                         | 68+ :heavy_check_mark:                                                                    | Polyfill :heavy_check_mark:                                                                                                           | 64+ :heavy_check_mark:                                                              | 11+ :heavy_check_mark:                                                                 | 11+ :heavy_check_mark:                                                                     | 79+ :heavy_check_mark:                                                                      |

## Documentation / How to use / Options / Customization

The documentation is [hosted here](https://technikhil314.netlify.app/docs/carousel/introduction)

## If you liked my work, show some :heart: :star: the repo.

Also you can appreciate by