JSON Driven Responsive Slider In JavaScript – Wrap Carousel

Preview:

Description:

A JavaScript library that helps you generate a flexible, CSS animated carousel component from JSON.

It automatically centers the active slide and slides in siblings just like an infinite cycle.

Click/tap any inactive slide to slide through slides.

How to use it:

1. Define slides in a JSON file as follows:

// data.json
[
  {
    "bgImgURL": "1.jpg",
    "linkURL": "https://cssscript.com",
    "headline": "Slide 1",
    "caption": "Description 1"
  },
  {
    "bgImgURL": "2.jpg",
    "linkURL": "https://cssscript.com",
    "headline": "Slide 2",
    "caption": "Description 2"
  },
  {
    "bgImgURL": "3.jpg",
    "linkURL": "https://cssscript.com",
    "headline": "Slide 3",
    "caption": "Description 3"
  },
  {
    "bgImgURL": "4.jpg",
    "linkURL": "https://cssscript.com",
    "headline": "Slide 4",
    "caption": "Description 4"
  },
  {
    "bgImgURL": "5.jpg",
    "linkURL": "https://cssscript.com",
    "headline": "Slide 5",
    "caption": "Description 5"
  }
]

2. Create a container to hold the carousel.

<div id="carousel"></div>

3. Load the Wrap Carousel’s JavaScript and CSS in the HTML page.

<link rel="stylesheet" href="wrap-carousel.css" />
<script src="wrap-carousel.js"></script>

4. Initialize the carousel and define the path to the JSON file and image directory.

wrapCarousel({
  container: '#carousel',
  dataFileURI: 'demo/data.json',
  imgsDirURI: 'demo'
});

5. Config the carousel by overriding the default parameters:

let spaceBetweenSlides = 15,
    containerPadding = 16,
    startSlideOutDuration = 1, //seconds
    transitionDuration = .4, //seconds
    pauseDuration = 3, //seconds
    onloadHoldDuration = 1.5, //seconds
    interruptAutoInt = true,
    slideHeight = 250,
    onSlideWidth = 340,
    onSlideHeight = 300,