Wrap Carousel

Wrap Carousel is an animated, vanilla JavaScript-powered carousel, with two notble CSS-animated effects:

It wraps, so when one a slide is bumped off the left or right edge, it reappears at the other edge, creating an infinite cycle. This process is animated.
The non-active slides are compressed, meaning they expand when they become active, and contract once again when they return to inactive state.

It feeds off a JSON-formatted file denoting the slides' text and images. You can see a working demo here.

Example 🔗

This carousel can be initialised via:

wrapCarousel({
    container: '#example',
    dataFileURI: 'wrap-carousel/slides/data.json',
    imgsDirURI: 'wrap-carousel/slides'
});

See the demo page for a working example.

API 🔗

Wrap Carousel defines a single function, which creates a carousel based on the passed parameters. See also: Config defaults.

wrapCarousel(params) - the main function to create a carousel. params is an object of parameters, including:
- container (string/object) - a DOM selector string or an HTML element reference pointing to the container element the carousel should be inserted into.
- dataFileURI (string) - the URI to a JSON-formatted data file (see Slides data file) containing information about the carousel's slides.
- imgsDirURI (string) - the URI to to the containing folder of the images specified in the slides data file.

Slides data file 🔗

Wrap Carousel is populated by slides defined in a separate, JSON-formatted data file. Wrap Carousel is notified about this file and its location via the dataFileURI parameter.

The file should be structured as an array, with each slide as an object inside the array with the following params:

bgImgURL (string) - the filename of the image to show (within the directory specified by the imgsDirURI param).
linkURL (string) - the URL to go to when the slide is clicked.
headline (string) - the slide's title text
caption (string) - the slide's main text, under the headline.

For example:

[
    {
        "bgImgURL": "panda.jpg",
        "linkURL": "Pands.html",
        "headline": "Pands!",
        "caption": "Pands are lovely creatures. Check out our pandas page for the latest panda news."
    },
    ...
]

Config defaults 🔗

Wrap Carousel defines several default config settings at the head of the JavaScript file. These conertan the sizing (and spacing) of slides, and transition durations.

Other stylistic factors, such as border radius and carousel background colour, can be edited via the CSS file.

spaceBetweenSlides - the space in pixels separating slides (default: 15)
startSlideOutDuration - the duration in seconds of the animation that occurs when a slide is bumped off the edge of the carousel (default: 1)
transitionDuration - the duration in seconds of the main transition, i.e. between one slide being active and another taking its place (default: 0.4)
pauseDuration - the duration in seconds that a slide stays active before transitioning to the next one (default: 3)
onloadHoldDuration = the duration in seconds before the carousel should begin transitioning after it is initially loaded (default: 1.5)
slideHeight - the hehgith in pixels of a non-active slide
onSlideWidth - the width in pixels of the active, i.e. expanded, slide
onSlideHeight - the height in pixels of the active slide

The widths of the non-active slides will be calculated automatically, based on the space available in the container.

Download Download from Github

Did I help you? Feel free to be amazing and buy me a coffee on Ko-fi!