Full Width Image Carousel / Gallery Plugin with jQuery - Scroller Gallery

File Size: 4.2 MB
Views Total: 5002
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Full Width Image Carousel / Gallery Plugin with jQuery - Scroller Gallery

Scroller Gallery is a jQuery plugin which helps you present your images in an endless-looping carousel / gallery with the following features:

  • Displays your images in a full width carousel with prev/next navigation.
  • When you click on an image, the carousel will expend into a lightbox-like gallery view with carousel thumbnails navigation.
  • GSAP based high-performance animations.

How to use it:

1. Include the required styles.css in your document's head section.

<link rel="stylesheet" href="css/styles.css">

2. Include the necessary jQuery library and GSAP's TweenMax.min.js at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

3. Include the jQuery Scroller Gallery plugin's script after jQuery library.

<script src="js/main.js"></script>

4. Add your images into the carousel / gallery as follows.

<div class="scroller">
  <div class="scroller-wrap">

    <button class="left-arrow">next</button>
    <button class="right-arrow">prev</button>

    <div class="scroller-container">
      <div class="slide"> <img data-ind="2" src="1.jpg" alt=" ">
        <div class="cover"></div>
      </div>
      <div class="slide"> <img data-ind="2" src="2.jpg" alt=" ">
        <div class="cover"></div>
      </div>
      <div class="slide"> <img data-ind="2" src="3.jpg" alt=" ">
        <div class="cover"></div>
      </div>
      <div class="slide"> <img data-ind="2" src="4.jpg" alt=" ">
        <div class="cover"></div>
      </div>
      <div class="slide"> <img data-ind="2" src="5.jpg" alt=" ">
        <div class="cover"></div>
      </div>
    </div>

  </div>
</div>

5. Initialize the plugin.

$('.scroller').scrollerGallery();

Change log:

2015-02-03

  • Add structure to change modes between bootstrap break points.

This awesome jQuery plugin is developed by garyconstable. For more Advanced Usages, please check the demo page or visit the official website.