⚠️ PureJSCarousel is no longer maintained. If you need something like this in project that use react, please see react-simply-carousel
Pure JavaScript carousel plugin (responsive)
Demo: https://vadymshymko.github.io/portfolio/purejscarousel/
Browser support
| Chrome | IE | Firefox | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| 9 | 4 | 4.3 |
<!-- stylesheet -->
<link rel="stylesheet" href="path/to/purejscarousel.css">
<!-- js -->
<script src="path/to/purejscarousel.js"></script><div class="your-selector-for-carousel">
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
<div class="your-selector-for-carousel-slide"> Your Content </div>
...
</div>var yourVariable = new PureJSCarousel({
carousel: '.your-selector-for-carousel',
slide: '.your-selector-for-carousel-slide'
});| Option | Type | Default |
|---|---|---|
| carousel | string (CSS selector) | n/a |
| slide | string (CSS selector) | n/a |
| btnNext | string (CSS selector) | document.createElement('button') |
| btnPrev | string (CSS selector) | document.createElement('button') |
| oneByOne | boolean | false |
| speed | int | 1000 |
| delay | int | 0 |
| effect | string | 'linear' |
| autoplay | boolean | false |
| autoplayDelay | int | 1000 |
| autoplayStartDelay | int | autoplayDelay |
| autoplayDirection | string | 'next' |
| infinite | boolean | false |
Go to next slide: yourVariable.goToNext();
Go to prev slide: yourVariable.goToPrev();
Go to slide: yourVariable.goTo(slideIndex);
Update carousel: yourVariable.update();
Disable carousel control: yourVariable.disableControl();
Enable carousel control: yourVariable.enableControl();
Destroy: yourVariable.destroy();
Start autoplay: yourVariable.startAutoplay(autoplayDirection);
Stop autoplay: yourVariable.stopAutoplay();