A slideshow and product slider that adapts to various screen sizes.
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


carousel.js: Responsive Carousel

A slideshow and product slider that adapts to various screen sizes.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/carousel.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/carousel.js"></script>

How to start the script

var carousel = new Carousel({
	'wrapper': document.querySelector('.hero-slideshow'),
	'slides': document.querySelectorAll('.hero-slideshow figure'),
	'delay': 6000,
	'modify': true

wrapper : {css rule} - The wrapper for the scrolling items.

slides : {css rule} - The individual product items.

delay : {integer} - The time in milliseconds to wait before resuming the slideshow after an interaction.

modify : {boolean} - Turn the inline image in to the background of the parent item.

How to control the script



index : {integer} - The number of the slide to skip to directly.



offset : {integer} - Show the next (1) or previous (-1) slides.

How to build the script

This project uses node.js from http://nodejs.org/

This project uses gulp.js from http://gulpjs.com/

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp dist - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8500/.
  • gulp php - Serves the project on a temporary php server at http://localhost:8500/.


This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at http://www.woollymittens.nl/