Automatic Carousel Inspired By Instagram Stories

Preview:

Description:

Just another automatic image carousel with animated overlays inspired by Instagram Stories.

How to use it:

1. Create a container for the carousel.

<div class="my-player"></div>

2. Import the core Player module.

import Player from "./player.js";

3. Initialize the carousel and add your own stories (slides) to the carousel.

new Player({
    target: ".my-player",
    slides: [
      {
        url: "1.jpg",
        alt: "slide 1",
        filter: ['contrast(150%)', 'blur(5px)'],
        overlays: [
          {
            type: "Text",
            text: "Hello!",
            classes: ["watercolor"],
            styles: {
              color: 'orange',
              "font-size": "60px",
              "text-shadow": "1px 1px #000",
              top: "60%",
              left: "30%",
              transform: "rotate(-90deg)",
              animation: "scale 2s infinite ease-in-out"
              
            }
          }
        ]
      },
      {
        url: "2.jpg",
        alt: "slide 2",
        overlays: [
          {
            type: "Text",
            text: "Hello world!",
            styles: {
              color: "blue",
              "font-size": "30px",
              "text-shadow": "1px 1px #000",
              bottom: "60%",
              right: "30%",
              transform: "rotate(-30deg)",
              animation: "scale 2s infinite ease-in-out"
            }
          }
        ]
      },
      // ...
    ]
})