Responsive jQuery Any Element Slider Plugin - snapslider
File Size: | 15 KB |
---|---|
Views Total: | 931 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.