Mobile-friendly JSON Carousel In jQuery - Slider2
File Size: | 5.94 KB |
---|---|
Views Total: | 4905 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery based slider/swiper that dynamically renders a responsive, touch-enabled, cross-platform carousel slider from an array of images with links defined in a JSON file.
The carousel will automatically slide through images and you can also switch between images by clicking left/right arrows or via touch swipe.
How to use it:
1. Load the necessary jQuery JavaScript library and jQuery easing plugin from CDN.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
2. Build the HTML structure for the carousel.
<div class="slider_wrapper"> <div class="slider"> </div> <!-- /.slider --> <div class="slider_objects"></div> </div>
3. Insert an array of objects containing image paths and links in the /data/file_name.json
.
{ "images": [ {"file_name":"https://source.unsplash.com/1600x900/?fitness","alt":"","href":"#"}, {"file_name":"https://source.unsplash.com/1600x900/?yoga","alt":"","href":"#"}, {"file_name":"https://source.unsplash.com/1600x900/?workout","alt":"","href":"#"}, {"file_name":"https://source.unsplash.com/1600x900/?running","alt":"","href":"#"}, {"file_name":"https://source.unsplash.com/1600x900/?girl","alt":"","href":"#"}, {"file_name":"https://source.unsplash.com/1600x900/?cat","alt":"","href":"#"} ] }
4. Load the Slider2 plugin's JavaScript and CSS in the document. That's it.
<link rel="stylesheet" href="css/style.css"> <script src="js/main.js"></script>
This awesome jQuery plugin is developed by Eki-in-san. For more Advanced Usages, please check the demo page or visit the official website.