Easy Image Carousel Gallery Plugin - jQuery Swiper-Gallery
File Size: | 8.46 KB |
---|---|
Views Total: | 4064 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Swiper-Gallery is a lightweight and easy-to-use jQuery plugin to generate a responsive, mobile-friendly carousel & gallery on the web app.
Main features:
- Infinitely loop through slides by clicking navigation arrows.
- Automatic rotation.
- Auto thumbnail navigation.
- Hover over thumbnails to switch between slides.
- Rich text image captions.
- Cross-browser.
- Dead simple to use. Without the need of writing any JS.
How to use it:
1. Load the jQuery Swiper-Gallery plugin and other required JavaScript & CSS resources in the html document.
<link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="js/slides.js"></script>
2. Add images together with captions, navigation controls to the carousel as these.
<div class="slider_box"> <!-- slides --> <div class="silder_con"> <div class="silder_panel"> <a href="#" class="silder_panel_item"> <img src="1.jpg"> </a> <a href="#" class="silder_intro"> <div class="silder_intro_content"> Image Caption Here </div> </a> </div> <div class="silder_panel"> <a href="#" class="silder_panel_item"> <img src="2.jpg"> </a> <a href="#" class="silder_intro"> <div class="silder_intro_content"> Image Caption Here </div> </a> </div> <div class="silder_panel"> <a href="#" class="silder_panel_item"> <img src="3.jpg"> </a> <a href="#" class="silder_intro"> <div class="silder_intro_content"> Image Caption Here </div> </a> </div> ... </div> <!-- controls --> <div class="silder_nav_mask"></div> <div class="silder_nav"></div> </div>
This awesome jQuery plugin is developed by shzym86. For more Advanced Usages, please check the demo page or visit the official website.