PureJSCarousel

:warning: 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+

Getting Started

1. Include PureJSCarousel files

<!-- stylesheet -->
<link rel="stylesheet" href="path/to/purejscarousel.css">
<!-- js -->
<script src="path/to/purejscarousel.js"></script>

2. Set up your HTML

<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>

3. Call the PureJSCarousel

var yourVariable = new PureJSCarousel({
  carousel: '.your-selector-for-carousel',
  slide: '.your-selector-for-carousel-slide'
});

3.1 Options

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

3.2 Methods

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();