Easy Image Carousel Gallery Plugin - jQuery Swiper-Gallery

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

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.