Responsive Full-window Image Slider Plugin - scaleslider.js

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.

<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.

<div class="singleSlide">
  <div class="singleSlideContainer">
    <img src="1.png">
    <img src="2.png">
    <img src="3.png">
    <img src="4.png">
    <img src="5.png">
    ...
  </div>

  <div class="singleArrow saLeft"></div>
  <div class="singleArrow saRight"></div>
  <div class="singleDotsContainer"></div>
</div>

3. Place jQuery library and the scaleslider.min.js script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/scaleslider.min.js"></script>

4. Call the function and the plugin will take care of the rest.

$('.singleSlide').scaleslider();

5. Default plugin options.

sliderWidth     : '100%',
sliderHeight    : 300,
dotNavigation   : true,
arrowNavigation : true,
keyNavigation   : true

Change log:

2016-07-02

• Small bug - fixes

2016-06-27

• JS & CSS update

2016-06-22

• bugfix

2016-06-17

• added options.

2016-06-16

• Code improvements

2016-06-15

• Code improvements

---

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