This time I will share jQuery Plugin and tutorial about Mobile-friendly JSON Carousel In jQuery – Slider2, hope it will help you in programming stack.
| File Size: | 5.94 KB |
|---|---|
| Views Total: | 3346 |
| 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.
1 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" |
2 |
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" |
3 |
crossorigin="anonymous"></script> |
4 |
<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.
1 |
<div class="slider_wrapper"> |
2 |
<div class="slider"> |
3 |
</div> <!-- /.slider --> |
4 |
<div class="slider_objects"></div> |
5 |
</div> |
3. Insert an array of objects containing image paths and links in the /data/file_name.json.
01 |
{ |
02 |
"images": |
03 |
[ |
04 |
{"file_name":"https://source.unsplash.com/1600x900/?fitness","alt":"","href":"#"}, |
05 |
{"file_name":"https://source.unsplash.com/1600x900/?yoga","alt":"","href":"#"}, |
06 |
{"file_name":"https://source.unsplash.com/1600x900/?workout","alt":"","href":"#"}, |
07 |
{"file_name":"https://source.unsplash.com/1600x900/?running","alt":"","href":"#"}, |
08 |
{"file_name":"https://source.unsplash.com/1600x900/?girl","alt":"","href":"#"}, |
09 |
{"file_name":"https://source.unsplash.com/1600x900/?cat","alt":"","href":"#"} |
10 |
] |
11 |
} |
4. Load the Slider2 plugin’s JavaScript and CSS in the document. That’s it.
1 |
<link rel="stylesheet" href="css/style.css"> |
2 |
<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.
source : jquery.net
