Getting Started
Installation
Download
- CSS
- minified: scroll.carousel.min.css
- Javascript
- minified: scroll.carousel.min.js
CDN
CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/scroll-carousel@1.2.7/dist/scroll.carousel.min.css" />
Javascript
<script src="https://cdn.jsdelivr.net/npm/scroll-carousel@1.2.7/dist/scroll.carousel.min.js"></script>
Package managers
npm
npm i scroll-carousel
Import JS
import ScrollCarousel from 'scroll-carousel';
Import CSS
@import 'node_modules/scroll-carousel/dist/scroll.carousel.min.css';
Demos
Basic Example
HTML
<div class="my-carousel">
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
</div>
Javascript
new ScrollCarousel(".my-carousel");
Autoplay Example
HTML
<div class="my-carousel">
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
</div>
Javascript
new ScrollCarousel(".my-carousel", {
autoplay: true
});
Direction Example
HTML
<div class="my-carousel">
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
</div>
Javascript
new ScrollCarousel(".my-carousel", {
smartSpeed: true,
direction: 'ltr'
});
Slide Selector Example
HTML
<div class="my-carousel">
<div class="my-element"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-element"></div>
</div>
Javascript
new ScrollCarousel(".my-carousel", {
slideSelector: '.my-slide'
});
API
Options
- autoplay
- Type:
BooleanDefault:falseThe option will allow the slides move automatically and still you will have the ability to handle sliding speed on scroll.
- autoplaySpeed
- Type:
NumberDefault:5Control autoplay speed. It needs to be greater than 0.
- speed
- Type:
NumberDefault:7The value given is actually how fast you want to move on scroll. It needs to be greater than 0.
- smartSpeed
- Type:
BooleanDefault:falseIt will give carousel movement speed depending on your scroll speed(how fast or slow you are scrolling).
- direction
- Type:
StringDefault:rtlControl direction left to right or right to left. Two possible option - 'ltr' or 'rtl'
- slideSelector
- Type:
StringDefault:nullSelect slide with class name which you want to select for carousel. Other element will behave as simple.
- margin
- Type:
NumberDefault:10To make gap between slides.
Methods
destroy()
Remove ScrollCarousel functionality completely. destroy will return the element back to its pre-initialized state.
reinit()
This will initialize your carousel after destroy with previous options and returned the ScrollCarousel instance.
HTML
<button id="button">Destroy</button>
<div class="my-carousel">
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
<div class="my-slide"></div>
</div>
Javascript
let scrollCarousel = new ScrollCarousel(".my-carousel", {
speed: 8,
smartSpeed: true,
autoplay: true
});
document.querySelector('#button').addEventListener('click', function () {
if (scrollCarousel.isActive) {
scrollCarousel.destroy();
} else {
scrollCarousel = scrollCarousel.reinit();
}
});
Events
Scroll Carousel offers events in key areas of the code. This gives you the ability to listen for any changes and perform your own actions.
0%
ready
let scrollCarousel = new ScrollCarousel(".my-carousel", {
speed: 8,
smartSpeed: true,
autoplay: true,
on: {
ready: function () {
console.log("Be ready");
}
}
});
destroy
let scrollCarousel = new ScrollCarousel(".my-carousel", {
speed: 8,
smartSpeed: true,
autoplay: true,
on: {
destroy: function () {
console.log("Destroyed");
}
}
});
move
let scrollCarousel = new ScrollCarousel(".my-carousel", {
speed: 8,
smartSpeed: true,
autoplay: true,
on: {
move: function (progressPercent) {
console.log("Scrolling", progressPercent);
}
}
});