toozhuang / PureJSCarousel

Pure JavaScript carousel plugin (touch enabled && responsive)

Home Page:https://vadymshymko.github.io/portfolio/purejscarousel/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PureJSCarousel

Pure JavaScript carousel plugin (responsive)

Demo: https://vadymshymko.github.io/portfolio/purejscarousel/

If you need this in project that use react, please see react-simply-carousel

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

About

Pure JavaScript carousel plugin (touch enabled && responsive)

https://vadymshymko.github.io/portfolio/purejscarousel/


Languages

Language:JavaScript 98.6%Language:CSS 1.4%