Responsive Full-window Image Slider Plugin - scaleslider.js

File Size: 298 KB
Views Total: 2638
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="singleArrow saLeft"></div>
  <div class="singleArrow saRight"></div>
  <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.

<script src="//"></script>
<script src="js/scaleslider.min.js"></script>

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


5. Default plugin options.

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

Change log:


  • Small bug - fixes



  • bugfix


  • added options.


  • Code improvements


  • Code improvements

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