CSS can scroll, why not use it? Scroll horizontally to see what it can do...
CarouCSSel acts CSS-first. That means with just using the basic CSS/SCSS styles, CarouCSSel creates a horizontal list of items and overflows them if necessary. Users with touch devices or horizontal mouse wheel can use the native CSS-based scrolling.
Depending on the browser and operating system, such scrolling lists render a scrollbar. With the support of JavaScript, CarouCSSel will detect the height of the scrollbar and hides them across all platforms.
Learn more about the scrollbar mask feature in the README.
Buttons allow the user to scroll step by step, forwards and backward between items inside the carousel.
import {Carousel} from 'caroucssel';
import {Buttons} from 'caroucssel/features/buttons';
const el = document.querySelector('.carousel');
const carousel = new Carousel(el, {
features: [
new Buttons(),
],
}); Do you want some more details? Go to the documentation or try the demo.
The pagination is a list of buttons that allow navigating directly to a specific item/index inside the carousel.
import {Carousel} from 'caroucssel';
import {Pagination} from 'caroucssel/features/pagination';
const el = document.querySelector('.carousel');
const carousel = new Carousel(el, {
features: [
new Pagination(),
],
}); Do you want some more details? Go to the documentation or try the demo.
@import '~caroucssel';
.selector {
@include caroucssel();
@include caroucssel-snap(100%);
}
<link rel="stylesheet" href=href="./caroucssel.min.css"> <div class="caroucssel use-snap"> <div>Item 1</div> <div>Item 2</div> </div>
Do you want some more details? Go to the documentation or try the demo.
CarouCSSel provides a plugin mechanism called "features". Each behavior can be added with a custom feature implementation that is passed into an instance of the carousel. All the previously mentioned built-in features are using the same mechanism. This keeps the footprint of used network traffic and execution time as low as possible - only load what you need! Basically, a feature is a plugin that implements all required functions and properties to match a specified API.
Do you want some more details? Go to the documentation and learn how to build your own feature on top of the CarouCSSel core.
npm i caroucssel
yarn add caroucssel