Responsive Image Carousel With jQuery And HTML List - gSlider
File Size: | 15 KB |
---|---|
Views Total: | 1459 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A small and easy-to-use jQuery slider plugin which transforms a list of images into a responsive, infinitely looping carousel with next/prev navigation arrows.
How to use it:
1. Load the stylesheet gslider.css
in the head
section of the document.
<link rel="stylesheet" href="/css/gslider.css">
2. Insert images as slides to the slider.
<div id="slider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"><<</a> <ul> <li><img src="1.jpg" alt="Img 01"></li> <li><img src="2.jpg" alt="Img 02"></li> <li><img src="3.jpg" alt="Img 03"></li> <li><img src="4.jpg" alt="Img 04"></li> <li><img src="5.jpg" alt="Img 04"></li> </ul> </div>
3. Load jQuery library and the JavaScript gslider.js
at the end of the document. That's it.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="/js/gslider.js"></script>
This awesome jQuery plugin is developed by Giganicola. For more Advanced Usages, please check the demo page or visit the official website.