Basic Responsive Carousel With Ajax Support – imageCarousel

Category: Javascript , Slider | February 22, 2017
Views Total:2,118 views
Official Page:Go to website
Last Update:February 22, 2017


Basic Responsive Carousel With Ajax Support – imageCarousel


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>
<!-- 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

You Might Be Interested In:

Leave a Reply