Creating an Immersive Slider Experience with jQuery Immersive Slider

October 30, 2013 in Tutorials by Pete R.

Sliders are a key part of websites these days. It allows you to present your content in a more interactive way while saving the website’s space at the same time. Most of the time though, sliders do seem a little out of place and don’t flow well with the whole website.

Today, let me present to you Immersive Slider, a plugin I built to help developers create a more immersive slider experience by changing the whole container to match the viewing slide like you see on Google’s TV website.

Note: This plugin has been tested on Windows, OSX, iOS, Android, Chrome, Firefox, Safari and IE10.

Creating an Immersive Slider Experience with jQuery Immersive Slider

[tut demo=”https://onextrapixel.com/examples/an-Immersive-slider-experience-withj-query-Immersive-slider/” download=”https://onextrapixel.com/examples/an-Immersive-slider-experience-withj-query-Immersive-slider/an-Immersive-slider-experience-withj-query-Immersive-slider.zip”]

Immersive Slider Tutorial

Without further ado, here’s how you can use this plugin:

How does this work?

The plugin consists of 2 phases, the first is the positioning, and the second is the animation. The plugin will loop through each slide, look for the data-blurred attribute and use the value to append the background to the defined container. Once all that is done, the plugin will position the non active backgrounds and slides out of your viewport to be ready to animate. Once the user clicks the next button or the pagination, the plugin will then move the whole slider and background to the next slide using the CSS3 transform.

In this plugin, I have decided to add an experimental feature called CSSBlur which will automatically blur the first image it finds on the fly using CSS3’s filter without you having the define data-blurred attribute to all of your slides. As you may know, the function is very limited (works only on Chrome) and has a performance issue so use it at your own risk. Basically, the plugin will grab the first image in each slide, append the background to the container and then apply filter: blur(20px) style to each background.

How-Tos

First and foremost, make sure you’ve included: the latest jQuery plugin available here, and then include both the jquery.immersive-slider.js and immersive-slider.css found here into your document’s . Once that is done, create an HTML markup as follows:

HTML

<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. You can also have as many slides as you like inside the immersive_slider container. Don’t forget to switch out all <<background-image-url>> with the URL of the image you want the slider to display when that particular slide is active. Feel free to remove the navigational buttons if you don’t need them. Once that is done, simply call the script like this:

JS:

$("#immersive_slider").immersive_slider({
  animation: "fade",
  slideSelector: ".slide",
  container: ".main",
  cssBlur: false,
  pagination: true,
  loop: true,
  autoStart: 5000
});

With this setup, you will get the same effect as you see on Google’s TV website where each slide will fade in/out when navigated. For further customization, you can change these options:

animation: The usual animation options. For horizontal slide, you can set it to “fade”, “slide”, or “bounce”. In case you want it to slide vertically, you can set it to “slideUp”, or “bounceUp”. The default value is slide.
slideSelector: In case the class name .slide has already been used somewhere else, you can change to your own custom selector here.
container: This option will let you define the container of which the background will appear. With the setup above and the default value for this option, the background will be automatically appended to the .main container. Feel free to change this to whatever container you want, but make sure that this container contains the slider itself.
cssBlur: This is an experimental feature. In case you don’t want to keep adding new data-blurred attribute to each slide, you can trigger this to true and it will generate the blur image on the fly (more info below).
pagination: You can toggle this to false in case you don’t want a pagination.
loop: You can define whether your want the slider to loop or not. Default is true.
autoStart: If you want the slider to automatically slide for the determined interval, you can set the millisecond value in this field. Set to false or 0 if you want to disable this. The default value is 5000.

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

Experimental Feature: CSSBlur

This plugin is capable of blurring the images, blowing them up and using them as a background without you having to manually set each slide as a background image. As mentioned earlier, this was done using the CSS3 style called Filter which only works on Chrome, and may be a performance hog so use it at your own risk.

To try this feature out, all you have to do is create a markup like this:

HTML

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

Again, make sure to switch out all <<background-image-url>> with the URL of the image. Once this is laid out, simply call the function with the cssBlur option set to true:

JS:

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

Now your slider will create a background on the fly using the first image it finds and CSS3.

Public Methods

For better accessibility, I have decided to add a few public methods to let you move the slider programmatically. Here are all the available methods:

$.fn.moveNext()
This method allows you to move the slider to the next one.
JS:

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

$.fn.movePrev()
This method allows you to move the slider to the previous one.
JS:

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

Conclusion

And that’s all you need to know to hack away with this plugin. Hope you have enjoyed my little tutorial and plugin. I can’t wait to see what you guys do with it. If you have anything to share, or have a question or suggestion, please let me know in the comments below.