Responsive Dynamic Content Slider jQuery - Download Responsive Dynamic Content Slider With jQuery

Download Responsive Dynamic Content Slider With jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Dynamic Content Slider With jQuery, hope it will help you in programming stack.

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

Demo Download

“

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.

view source
01 <div class="wrapper">
02   <div class="slider">
03     <div class="slider__wrapper">
04       <!-- Images -->
05     </div>
06     <div class="slider__tracker">
07       <!--<a href="https://www.jqueryscript.net/slider/">Slider</a> tracker-->
08     </div>
09   </div>
10 </div>

2. Add a loading spinner to the slider.

view source
1 <div class="loader" id="loader">
2   <img src="img/loader.gif" alt="Loading...">
3 </div>

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

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

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

view source
01 {
02   "speed": "1500",
03   "width": "90",
04   "height": "550",
05   "sliders": [{
06       "id": "1",
07       "link": "#",
08       "src": "img/img-1.jpg",
09       "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. ",
10       "btn": "First slide",
11       "title": "This is a first slide!"
12     },
13     {
14       "id": "2",
15       "link": "#",
16       "src": "img/img-2.jpg",
17       "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. ",
18       "btn": "Second slide",
19       "title": "This is a second slide!"
20     },
21     {
22       "id": "3",
23       "link": "#",
24       "src": "img/img-3.jpg",
25       "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut . ",
26       "btn": "Third slide",
27       "title": "This is a third slide!"
28     },
29     {
30       "id": "4",
31       "link": "#",
32       "src": "img/img-4.jpg",
33       "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. ",
34       "btn": "Fourth slide",
35       "title": "This is a fourth slide!"
36     }
37   ]
38 }

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.

source : jquery.net

Related posts: