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.










