Responsive Slider jQuery Plugin with Fancy Transition Effects - Helium Slider

Helium Slider is another responsive jQuery slider plugin used to circle through a set of Html elements with fancy transition animations and easing effects.

How to use it:

1. Markup Html structure.

<div id="demo" class="helium-slider loading">
<div class="next">next</div>
<div class="prev">prev</div>
<ul class="slide-nav">
</ul>
<div class="slide-window">
<ul class="slide-holder">
<li>
<div class="slide"><img src="1.jpg"></div>
<div class="pane caption">Editable HTML Panes</div>
<div class="pane caption2">Editable HTML Panes2</div>
<div class="pane caption3">Editable HTML Panes3</div>
</li>
<li>
<div class="slide"><img src="3.jpg"></div>
<div class="pane caption">Editable HTML Panes</div>
<div class="pane caption2">Editable HTML Panes2</div>
<div class="pane caption3">Editable HTML Panes3</div>
</li>
<li>
<div class="slide"><img src="3.jpg"></div>
<div class="pane caption">Editable HTML Panes</div>
<div class="pane caption2">Editable HTML Panes2</div>
<div class="pane caption3">Editable HTML Panes3</div>
</li>
<li>
<div class="slide"><img src="http://placehold.it/900x400&text=slide4"></div>
<div class="pane caption">Editable HTML Panes</div>
<div class="pane caption2">Editable HTML Panes2</div>
<div class="pane caption3">Editable HTML Panes3</div>
</li>

<li>
...
</li>

</ul>
</div>
</div>

2. The CSS to style the slider.

<style type="text/css">
div.helium-slider {
width: 100%;
position: relative;
margin: 0;
}
div.helium-slider div.slide-window {
width: 100%;
overflow: hidden;
position: relative;
margin: 0;
}
div.helium-slider.loading {
background: url('img/loading.gif') no-repeat center center;
}
div.helium-slider .next, div.helium-slider .prev {
font-size: 24px;
font-weight: bold;
color: #555;
position: absolute;
top: 45%;
cursor: pointer;
z-index: 10;
}
div.helium-slider .next {
right: 10px;
}
div.helium-slider .prev {
left: 10px;
}
div.helium-slider ul.slide-holder {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
opacity: 0;
}
div.helium-slider ul.slide-holder li {
position: relative;
float: left;
}
div.helium-slider ul.slide-holder li.loop {
position: absolute !important;
float: none !important;
}
div.helium-slider ul.slide-holder li .slide img {
width: 100%;
}
div.helium-slider ul.slide-holder li .caption3 {
position: absolute;
right: 50px;
top: 10px;
}
div.helium-slider ul.slide-holder li .caption2 {
position: absolute;
right: 50px;
bottom: 10px;
}
div.helium-slider ul.slide-holder li .caption {
position: absolute;
left: 30px;
bottom: 10px;
}
div.helium-slider div.pauser {
position: absolute;
left: 50%;
top: 50%;
border-right: 15px solid #fff;
border-left: 15px solid #fff;
width : 12px;
height: 60px;
margin-left: -21px;
margin-top: -30px;
z-index: 11;
opacity: 0.5;
}
div.helium-slider ul.slide-nav {
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 10px;
width: 100%;
z-index: 11;
display: none;
}
div.helium-slider ul.slide-nav li {
background: #666;
margin: 0px 4px;
height: 10px;
width: 10px;
display: inline-block;
cursor: pointer;
border-radius: 5px;
}
div.helium-slider ul.slide-nav li.active {
background: #333;
}
</style>

3. Load the jQuery library and jQuery Helium Slider plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/helium.mutate.js"></script> 
<script src="js/helium.slider.js"></script> 

4. Initialize the plugin with default settings.

$(function() {
$("#demo").heliumSlider({

// pane fade in: true or false
paneFade: true ,       

// pane animate X offset: pixel value
paneXOffset: [300] ,    

// pane animate Y offset: pixel value
paneYOffset: [0] ,     

// pane delay before animate: milliseconds
paneDelay: [1000] ,   

// pane speed of animate: milliseconds
paneSpeed: [1500] ,   

// use navigation: true or false
useNav: true ,  

// template for contents of nav list item
navTemplate: "" ,       

// auto play slides. 
// delay between transitions: milliseconds
// negative values reverse direction.  
// any value between -20 and 20 disables autoplay)
autoPlay: 6000 ,       

// speed of main slide animations
speed: 100 ,    

// easing type: "swing" or "linear"
easing: "swing" ,    

// fade new slide in speed: milliseconds
mainFadeIn: 500 ,       

// fade old slide out speed: milliseconds
mainFadeOut: 500 ,   

// fires after the main slide transition takes place
afterSlide: function(){ 
} ,

// stop auto play on this slide: number or false
autoStopSlide: false ,  

// stop auto play after looping autoplay this many times: number or false
autoStopLoop: false ,   

// when autoplay ends, pause and keep controls available.
// clicking play button replays autoStop transitions
autoStopPause: false,

// pause autoplay on hover: true or false
pauseOnHover: false ,   

// pause autoplay when any element in the slider is focused: true or false
pauseOnFocus: false ,   

// include controls for pause and play: true or false
pauseControls: false,

// include controls for pause and play: true or false
adaptHeight: false 

});
});

Change logs:

2015-09-17

• added adaptHeight option

2015-09-12

• fix pausing interactions

2015-06-25

• added thumbnail functionality

2015-02-18

• change play/pause to a toggle

2015-01-21

• fixed index issue

2015-01-16

• v2.0.2

2014-09-23

• ie8 redraws, reset loop numbers on autoStop, hover event only on slide-holder

2014-09-09

• combine next/prev

2014-09-06

• v1.9

2014-06-12

• accessibility text and pause fix

2014-05-31

• accessibility text and pause fix

2014-05-14

• tab key fix

2014-05-07

• Add paneCalc method

2014-03-05

• allow swipe during trans

---

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