Responsive Dynamic Content Slider With jQuery

File Size: 4.08 MB
Views Total: 11002
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Dynamic Content Slider With jQuery

This is a dynamic, flexible, fully responsive slider/carousel built with jQuery that automatically loops through a series of slides containing a variety of content (e.g. images, text, buttons) stored in a JSON file.

How to use it:

1. Create the html template for the slider.

<div class="wrapper">
  <div class="slider">
    <div class="slider__wrapper"> 
      <!-- Images --> 
    </div>
    <div class="slider__tracker"> 
      <!--Slider tracker--> 
    </div>
  </div>
</div>

2. Add a loading spinner to the slider.

<div class="loader" id="loader">
  <img src="img/loader.gif" alt="Loading...">
</div>

3. Load jQuery library and other required resources in the document.

<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>
<script src = "js/app.js"></script>

4. Add your own content to the slider as you see in the data.json

{
  "speed": "1500",
  "width": "90",
  "height": "550",
  "sliders": [{
      "id": "1",
      "link": "#",
      "src": "img/img-1.jpg",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. ",
      "btn": "First slide",
      "title": "This is a first slide!"
    },
    {
      "id": "2",
      "link": "#",
      "src": "img/img-2.jpg",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. ",
      "btn": "Second slide",
      "title": "This is a second slide!"
    },
    {
      "id": "3",
      "link": "#",
      "src": "img/img-3.jpg",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut . ",
      "btn": "Third slide",
      "title": "This is a third slide!"
    },
    {
      "id": "4",
      "link": "#",
      "src": "img/img-4.jpg",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. ",
      "btn": "Fourth slide",
      "title": "This is a fourth slide!"
    }
  ]
}

Changelog:

2019-03-04

  • CSS fixed for safari

2019-03-02


This awesome jQuery plugin is developed by clickad. For more Advanced Usages, please check the demo page or visit the official website.