jQuery Immersive Slider – Create an immersive slider experience

Immersive Slider by Pete R.

Create an immersive slider that changes the whole container to match the viewing slide.

 

jquery-immersive-slider jquery-immersive-slider jquery-immersive-slider

DEMO | DOWNLOAD

Basic Usage

Immersive Slider let you create a unique immersive slider experience that changes the whole container to match the viewing slide like you see at the Google’s TV website. The plugin will let you assign background images per slide without you doing all the hard work.

To add this to your website, simply include the latest jQuery library together withjquery.immersive-slider.js, and immersive-slider.css into your document’s <head> and create an HTML markup as follows:

<div class="main">
  ...
  <div id="immersive_slider">
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>
    <div class="slide" data-blurred="<<background-image-url>>">
      ...
    </div>

    ...

    <a href="#" class="is-prev">&laquo;</a>
    <a href="#" class="is-next">&raquo;</a>
  </div>
</div>

The container main will be used to display the background images. Make sure you change all the<<background-image-url>> occurrences to the image path you wish the slider to show when that slide is active. Feel free to remove the navigational buttons if you don’t need it. Once that is done, simply call the script like this:

$("#immersive_slider").immersive_slider({
  animation: "bounce", // As usual, you can change the animation to these: slide (default), bounce, fade, slideUp, and bounceUp
  slideSelector: ".slide", // This option will let you assign custom selector for each slides in case .slide is already taken
  container: ".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: 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: true, // Toggle this to false if you don't want a pagination
  loop: true, // Toggle to false if you don't want the slider to loop. Default is true.
  autoStart: 5000 // Define the number of milliseconds before it navigates automatically. Change this to 0 or false to disable autoStart. The default value is 5000.
});

And that’s all you have to do to get this plugin up and running on your website. Pretty easy right?

Related post:  4 Free Ebooks from Packt Publishing – HTML/CSS/JavaScript/Hadoop

Experimental Feature: CSSBlur

The plugin is capable of blurring the first image it finds in each slide, blow them up and use it as a background without you having to manually set each slide a background image. This is done using the CSS3 style called Filter which only works on Chrome, and maybe a performance hog. Use it at your own risk.

To do this simply toggle the cssBlur option to true like this:

$("#immersive_slider").immersive_slider({
  cssBlur: true
});

and make sure the images you want to blow up as a background are in each slides like this:

<div class="main">
  ...
  <div id="immersive_slider">
    <div class="slide">
      <img src="<<background-image-url>>">
      ...
    </div>
    <div class="slide">
      <img src="<<background-image-url>>">
      ...
    </div>
    ...
  </div>
</div>

The script will grab this first image, apply the CSS filter and blow them up with CSS filling the container for you. This is great when you already have an existing slider and you don’t want to add a new attribute for the background.

Public Methods

You can also trigger the slider to move programmatically as well:

$.fn.moveNext()

This method allows you to move the slider to the next one.

  $("#immersive_slider").moveNext();

$.fn.movePrev()

This method allows you to move the slider to the previous one.

  $("#immersive_slider").movePrev();

Created by Pete R., Founder of BucketListly.If you want to see more of his plugins, visit The Pete Design, or follow him on Twitter and Github.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close