This is a simple vanilla JS carousel used to display images. Self contained so it can be dropped into any project.

The layout is created using flexbox. By allowing flexbox to do the heavy lifting of responsive and adaptive design it leaves the JS to simply add a few classes here and there and control the order via flexbox order:n.

Slide transition effects are handled with performant CSS transitions, transforming only translateX() properties.

• NPM
• Yarn
• ParceJS (Application bundler)
• CSS (SASS)
• JS (ES6 Transpiled via babel)
• Docs (JSDoc style comments for autogen documentation)
• Karma/Jasmine (for tests)
• 3rd Party Dependancies
  • normalise.css (helps with cross browser defaults)
  • hammerjs (swipe events)

Install dependencies:

yarn install

To run in hot module reloading mode:

yarn start

To create a production build:

yarn build-prod

Fully compressed and concatenated HTML/CSS/JS

To run unit tests

yarn test

Instantiate the carousel

import { ImageCarousel } from './ImageCarousel';

const carousel = new ImageCarousel('.image-carousel', {
    numberOfImages: 6, 
    searchTerms: 'cats'
});

Move the carousel to the next item

carousel.next();

Move the carousel backwards one item

carousel.prev();

Move the carousel to any specific slide index. Method takes a Number

carousel.moveTo(4);

The carousel requires the following markup:

<ul class="image-carousel">
    <li><img src="my-default-image.jpg" alt="My Default Image"></li>
</ul>

ImageCarousel will add the markup for the additional slides. The first slide can be left blank or used as placeholder whilst waiting for the images to be returned from the API.

These options can be passed in when instantiating the class