Skip to content
This repository has been archived by the owner on Nov 29, 2022. It is now read-only.

vadymshymko/PureJSCarousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 

Repository files navigation

PureJSCarousel

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