Responsive jQuery Any Element Slider Plugin - snapslider

snapslider is simple yet powerful jQuery plugin that converts a series of any html elements into a responsive slider / gallery with support for paging, snapping and zooming.

How to use it:

1. Import the jQuery snapslider plugin's JS & CSS files into the webpage which has jQuery library loaded.

<link href="snapslider.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="abg-snapslider.js"></script>

2. The basic HTML structure for the slider. You can customize the slider by add the following data attributes to the top container.

<div class="gallery" data-snapslider>
  <div class="gallery__slider" data-snapslider-slider>
    <ul class="gallery__items">
      <li class="gallery__item" data-snapslider-item>
        Content 1
      </li>
      <li class="gallery__item" data-snapslider-item>
        Content 2
      </li>
      <li class="gallery__item" data-snapslider-item>
        Content 3
      </li>
    </ul>
  </div>
</div>

3. You can customize the slider by add the following data attributes to the top container.

• data-ss-enable-pagination: Enable the pagination. True or false.
• data-ss-enable-pagelist: Enable the page list. True or false.
• data-ss-enable-zoom: Enable the zoom features. True or false.
• data-ss-enable-zoomtopage: Enable the zoom-to-page features. True or false.
• data-ss-disable-keyboard-events: Disable the keyboard events. True or false.

<div class="gallery" 
     data-snapslider 
     data-ss-enable-zoom="true" 
     data-xss-enable-zoomtopage="true">
...

4. The plugin also allows you to serve the right images according to the screen size.

<div class="gallery" data-snapslider data-ss-enable-zoom="true" data-ss-bg-normal=".jpg" data-ss-bg-large="-large.jpg" data-ss-bg-largest="-largest.jpg" data-x-ss-enable-zoomtopage="true">
  <div class="gallery__slider" data-snapslider-slider>
      <div class="gallery__items">
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_1.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_2.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_3.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_4.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_5.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_6.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_7.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_8.jpg)" />
              </div>
          </div>
          <div class="gallery__item" data-snapslider-item>
              <div class="gallery__image-wrapper">
                  <img class="gallery__image" data-snapslider-bg src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(img/img_9.jpg)" />
              </div>
          </div>
      </div>
  </div>
</div>

---

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