scroller-gallery

Jquery Carousel Plugin that expends into a gallery view.

Include the CSS

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

Add the HTML

<div class="scroller">     <div class="scroller-wrap">          <button class="left-arrow">             <span class="icon">&nbsp;</span>         </button>         <button class="right-arrow">             <span class="icon">&nbsp;</span>         </button>          <div class="scroller-container">             <div class="slide">                 <img src="/images/0001.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(1) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0002.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(2) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0003.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(3) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0004.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(4) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0005.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(5) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0006.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(6) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0008.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(7) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>             <div class="slide">                 <img src="/images/0009.jpg" alt=" ">                 <div class="cover">                     <div class="info">                         <h3>(8) Lorem ipsum</h3>                         <h4>dolor sit amet consectetur</h4>                     </div>                 </div>             </div>         </div>     </div> </div> 

Include the Javascript

<script src="/js/jquery.js"></script> <script src="/js/touchswipe.js"></script> <script src="/js/velocity.js"></script> <script src="/js/scroller-gallery.js"></script>  <script>      $(function(){         $('.scroller').ScrollerGallery({          });     });  </script>