Skip to content

An image carousel. Used for showcasing a set of images with an auto-scroll or arrows to navigate between the showcased images.

Notifications You must be signed in to change notification settings

Liamsuu/image-carousel

Repository files navigation

Image-Carousel

Install with npm:

npm install easy-image-carousel

How to use

  • Create a div with the flex property in HTML:
<div style="display:flex"></div>
<!--Style inline, through a CSS file or Javascript -->
<!-- The carousel will match the height and width set on this element -->
  • Inside your Javascript file:
// Supports ES6 Module Syntax
import createCarousel from "easy-image-carousel";
import exampleImage from "./path/to/image"; // imported image
import anotherExampleImage from "./path/to/image"; // imported image

// these are the images imported above.
const myImage = new Image();
const myOtherImage = new Image();
myImage.src = exampleImage;
myOtherImage.src = anotherExampleImage;

//Store images in array
const allCarouselImages = [myImage, myOtherImage];

// select div element with the flex property created in the above HTML.
const imageCarouselContainer = document.querySelector("div");

// Run function with the Images array and the div created above in the HTML.
createCarousel(allCarouselImages, imageCarouselContainer);

example

About

An image carousel. Used for showcasing a set of images with an auto-scroll or arrows to navigate between the showcased images.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published