An ES6 Vanilla JS Carousel

Alpha - This project is still in development, and as such, probably isn't stable for use in production yet. When the time comes, a 1.0 release will be made, and it possibly will be made available as an npm module.

Include the Grease CSS file, and the the Grease JavaScript,

<link rel="stylesheet" src="dist/style.css">

...

<div id="grease-carousel">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
  <div>Slide 4</div>
</div>

...

<script src="dist/grease.js"></script>

<script>
  const carousel = document.getElementById('grease-carousel');
  const grease = new Grease( carousel, options );
</script>

• fade (default: false)
• buttons (default: true)
• captions (default: false)
• dots (default: false)
• ease (default: 'ease')
• infinite (default: false)
• ticker (default: false)
• slidesToShow (default: 1)
• slidesToScroll (default: 1)
• speed (in milliseconds - default: 300)
• breakpoint (default: 640)
• matchHeightClass

<script>
  const grease = new Grease( carousel, {
  	fade: true,
  	dots: true
  });
</script>

toDo

• autoplay
• prev/next labels

• init
• nextSlide
• previousSlide
• resize

grease.on('nextSlide', () => {
  // do stuff
});

todo

<div id="grease-carousel">
  <div data-caption="caption 1">Slide 1</div>
  <div data-caption="caption 2">Slide 2</div>
  <div data-caption="caption 3">Slide 3</div>
  <div data-caption="caption 4">Slide 4</div>
</div>

...

<script>
  const carousel = document.getElementById('grease-carousel');
  const grease = new Grease( carousel, {
    captions: true
  });
</script>

© 2017 Michael LaRoy. Find me on Twitter @laroymike