This time I will share jQuery Plugin and tutorial about Responsive Full-window Image Slider Plugin – scaleslider.js, hope it will help you in programming stack.
scaleslider.js is a lightweight, responsive, fullscreen jQuery image slider plugin that allows to slide through a group of images with a CSS3 based scale transition effect.
How to use it:
1. Link to the required stylesheet style.compressed.css for the basic slider styles.
1 |
<link rel="stylesheet" href="css/style.compressed.css"> |
2. Create a group of images and the add them together with the arrows navigation and dots pagination to the slider.
01 |
<div class="singleSlide"> |
02 |
<div class="singleSlideContainer"> |
11 |
<div class="singleArrow saLeft"></div> |
12 |
<div class="singleArrow saRight"></div> |
13 |
<div class="singleDotsContainer"></div> |
3. Place jQuery library and the scaleslider.min.js script at the end of the document so the page loads faster.
1 |
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> |
2 |
<script src="js/scaleslider.min.js"></script> |
4. Call the function and the plugin will take care of the rest.
1 |
$('.singleSlide').scaleslider(); |
5. Default plugin options.
4 |
arrowNavigation : true, |
Change log:
2016-07-02
2016-06-27
2016-06-22
2016-06-17
2016-06-16
2016-06-15
This awesome jQuery plugin is developed by marffinn. For more Advanced Usages, please check the demo page or visit the official website.
