iPhone like slider plugin with jQuery

iPhone like slider plugin with jQuery – Sequence.js

March 19, 2012
BSD License, Jquery, MIT License
1 Comment
SG

jQuery – Sequence.js is one of the best and interesting slider which contains infinite styles. It has its own feature like designing the theme with CSS3 and without jQuery, so theme is not a part of plugin which is greatest advantage for UI designers. This plugin will be supported in all major browsers.

In this modern world users are expecting to have all the required information at one shot. They don’t like to wait for long period to get the expected information. So web application should make the user to feel comfortable and produce the data in much more comprehensive way. Web apps can achieve this kind of functionality and user satisfaction with producing data in animated and interesting way.

Steps to implement :

Step1: Include jQuery Library

&lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;

1	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Step2: Initialize Sequence plugin

<script type="text/javascript">
   $(document).ready(function(){
    var options = {
		autoPlay: false,
		autoPlayDirection: 1,
		nextButton: ".next",
		prevButton: ".prev",
		preloader: "#sequence-preloader",
		prependPreloader: false,
		prependPreloadingComplete: "#sequence-preloader, #slideshow",
		prependNextButton: false,
		prependPrevButton: false,
		pauseIcon: false,
		animateStartingFrameIn: false,
		delayDuringOutInTransitions: false,
		afterPreload: function(){
			$(".prev, .next").fadeIn(500);
			if(!slideShow.transitionsSupported){
			$("#slideshow").animate({"opacity": "1"}, 1000);
			}
		}
	};
	var slideShow = $("#slideshow").sequence(options).data("sequence");
	if(!slideShow.transitionsSupported || slideShow.prefix == "-o-"){
		$("#slideshow").animate({"opacity": "1"}, 1000);
		slideShow.preloaderFallback();
	}
})
</script>

$(document).ready(function(){

var options = {

autoPlay: false,

autoPlayDirection: 1,

nextButton: ".next",

prevButton: ".prev",

preloader: "#sequence-preloader",

prependPreloader: false,

prependPreloadingComplete: "#sequence-preloader, #slideshow",

prependNextButton: false,

prependPrevButton: false,

pauseIcon: false,

animateStartingFrameIn: false,

delayDuringOutInTransitions: false,

afterPreload: function(){

$(".prev, .next").fadeIn(500);

if(!slideShow.transitionsSupported){

$("#slideshow").animate({"opacity": "1"}, 1000);

}

};

var slideShow = $("#slideshow").sequence(options).data("sequence");

if(!slideShow.transitionsSupported || slideShow.prefix == "-o-"){

$("#slideshow").animate({"opacity": "1"}, 1000);

slideShow.preloaderFallback();

}

})

</script>

Step3: HTML & CSS Markup

<div id="sequence-preloader">
   <div class="preloading">
	<img src="Preloader IMAGE URL1" alt="Sequence is loading, please wait..." />
	<img src="Preloader IMAGE URL2" alt="Sequence is loading, please wait..." />
	<img src="Preloader IMAGE URL3" alt="Sequence is loading, please wait..." />
   </div>
</div>
<div id="slideshow">
   <img class="prev" src="images/bt-prev.png" alt="Previous" />
   <img class="next" src="images/bt-next.png" alt="Next" />
   <ul>
	<li>
        	<div class="info animate-in">
		 <h2>Built using Sequence.js</h2>
		 <p>The jQuery Slider Plugin with Infinite Style</p>
                </div>
		<img class="sky animate-in" src="images/bg-clouds.png" alt="Blue Sky" />
		<img class="balloon animate-in" src="images/balloon.png" alt="Balloon" />
	</li>
	<li>
		<div class="info">
	         <h2>Creative Control</h2>
  		 <p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
 	        </div>
		<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
		<img class="aeroplane" src="images/aeroplane.png" alt="Aeroplane" />
	</li>
	<li>
	        <div class="info">
		  <h2>Cutting Edge</h2>
                  <p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
		</div>
		<img class="sky" src="images/bg-clouds.png" alt="Blue Sky" />
		<img class="kite" src="images/kite.png" alt="Kite" />
	</li>
    </ul>
</div>

</div>

<ul>

<li>

<h2>Built using Sequence.js</h2>

<p>The jQuery Slider Plugin with Infinite Style</p>

</div>

</li>

<li>

<h2>Creative Control</h2>

<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>

</div>

</li>

<li>

<h2>Cutting Edge</h2>

<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>

</div>

</li>

</ul>

</div>

Step4:

You can check the changes in major browsers.

Requirements :- jQuery Library
Licesnse :- MIT License, BSD License
Demo:- http://www.sequencejs.com/themes/sliding-horizontal-parallax/