Cool Fullscreen Image Carousel Plugin with jQuery and CSS3 - saSlider

File Size: 21.8 KB
Views Total: 3601
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cool Fullscreen Image Carousel Plugin with jQuery and CSS3 - saSlider

saSlider is an awesome jQuery slider plugin which helps you create a fully responsive image carousel slider (or any content slider) with a very unique transition effect between slides. This slider could be used for fullscreen effect or any other size and will orient the sliders automatically, so the images will always be centered no matter what.

How to use it:

1. Load the required CSS file in the head section of your web page.

<link href="css/saSlider.css" rel="stylesheet">

2. Load jQuery library 2.0+ and the jQuery saSlider plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="saSlider.js"></script>

3. Create an image carousel slider with prev/next arrows navigation following the markup structure as shown below.

<div class="slider">
  <a class="arrow next"></a>
  <a class="arrow prev"></a>
  <ul>
    <li class="active"> <img src="http://lorempixel.com/1800/1000/sports/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
    <li> <img data-src="http://lorempixel.com/1800/1000/fashion/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
    <li> <img data-src="http://lorempixel.com/1800/1000/people/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
    <li> <img data-src="http://lorempixel.com/1800/1000/abstract/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
    <li> <img data-src="http://lorempixel.com/1800/1000/cats/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
    <li> <img data-src="http://lorempixel.com/1800/1000/animals/"/>
      <div class="content">
        <h1>photo by </h1>
        <div class="by"> <span>lorempixel</span> </div>
      </div>
    </li>
  </ul>
</div>

4. Initialize the saSlider plugin.

var slider = $('.slider'),
saSlider = slider.saSlider().data('_saSlider');

5. The Javascript to delay the loading of all photos that should be lazy loaded.

slider.find('img[data-src]').each(function(){
  this.src = this.getAttribute('data-src');
});

6. The CSS to make your slider fullscreen on page load.

.slider {
  position: absolute;
  top: 0;
  width: 100%;
  right: 0;
}

Change logs:

2014-12-01

  • tiny fix for dragging

v1.0.0 (2014-11-30)

  • added drag / swipe support

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