CarouCSSel ^@1.0.4 : A lightweight dependency-free css carousel.

CSS can scroll, why not use it? Scroll horizontally to see what it can do...

The scrollbar

CarouCSSel detects the height of the scrollbar and hides them if necessary...

Do you want some more details? Go to the documentation or try the demo.

Enable control buttons

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.

Enable pagination

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.

Use snap points

SASS

@import '~caroucssel';

.selector {
	@include caroucssel();
	@include caroucssel-snap(100%);
}

CSS

<link rel="stylesheet" href=href="./caroucssel.min.css">

<div class="caroucssel use-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.

Installation

Via NPM

npm i caroucssel

Via Yarn

yarn add caroucssel