Responsive & Immersive jQuery Slider Plugin - Immersive Slider

Responsive & Immersive jQuery Slider Plugin - Immersive Slider
File Size: 446KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Immersive Slider is a responsive slider plugin for jQuery that enables you to create a Google's TV website style slider on your web page.

Features:

  • Changes the whole container to match the viewing slide.
  • Responsive designed for desktop, mobile, tablet, and laptop
  • 5 Built-in animation effects: slide, bounce, fade, slideUp, and bounceUp
  • Supports auto loop, pagination and arrows navigation
  • Experimental CSSBlur feature to blur the first image it finds in each slide

How to use it:

1. The Immersive Slider plugin requires the jQuery library already loaded. 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.immersive-slider.js"></script>
<link href='immersive-slider.css' rel='stylesheet' type='text/css'>

2. Create the html for the slider

<div id="demo"> <div class="slide" data-blurred="img/slide1_blurred.jpg"> <div class="content"> <h2> Title 1 </h2> <p> Description 1 </p> </div> <div class="image"> <img src="img/slide1.jpg" alt="Slider 1"> </div> </div> <div class="slide" data-blurred="img/slide2_blurred.jpg"> <div class="content"> <h2> Title 2 </h2> <p> Description 2 </p> </div> <div class="image"> <img src="img/slide2.jpg" alt="Slider 2"> </div> </div> <div class="slide" data-blurred="img/slide3_blurred.jpg"> <div class="content"> <h2> Title 3 </h2> <p> Description 3 </p> </div> <div class="image"><img src="img/slide3.jpg" alt="Slider 3"></a> </div> </div> <a href="#" class="is-prev">&laquo;</a> <a href="#" class="is-next">&raquo;</a> </div>
</div>

3. Call the plugin with options

<script type="text/javascript">
$(document).ready( function() {
$("#demo").immersive_slider({
container: ".main"
});
});
</script>

4. All the options

  • animation - Default to "bounce", As usual, you can change the animation to these: slide (default), bounce, fade, slideUp, and bounceUp
  • slideSelector - Default to  ".slide", This option will let you assign custom selector for each slides in case .slide is already taken
  • container - Default to ".main", This option lets you define the container of which the background will appear. Make sure the slider is inside this container as well.
  • cssBlur - Default to false, Experimental: In case you don't want to keep adding new data-blurred attributes, trigger this to true and it will generate the blur image on the fly (more info below).
  • pagination - Default to true, Toggle this to false if you don't want a pagination
  • loop - Default to true, Toggle to false if you don't want the slider to loop. Default is true.
  • autoStart - Default to 5000, Define the number of milliseconds before it navigates automatically. Change this to 0 or false to disable autoStart. The default value is 5000.

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