Basic Responsive Carousel With Ajax Support – imageCarousel

Preview:

Description:

A basic vanilla image carousel library that dynamically loads images from an external JSON file and then presents them in a responsive carousel UI.

How to use it:

Load the necessary JavaScript and CSS files in the webpage.

<link rel="stylesheet" href="css/styles.css">
<script src="js/myjs.js"></script>

Create a carousel container together with the navigation & pagination controls as this:

<div id="container" class="slide-container">
  <!-- prev/next buttons -->    
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<!-- pagination bullets -->  
<div id="dots"></div>

The JSON structure should be like this.

[{
  "title": "title 1"
  , "image_name": "1.jpg"
  , "description": "description 1"
  , "is_published": true
}, {
  "title": "title 2"
  , "image_name": "2.jpg"
  , "description": "description 2"
  , "is_published": true
}, {
  "title": "title 3"
  , "image_name": "3.jpg"
  , "description": "description 3"
  , "is_published": true
}]