jQuery Mouse Wheel Slider

This is one of the project that i created for my full time job, which i want to share this interesting jQuery Wheel slider.
If you haven see the slider before, please check out below

[button link=”http://35.185.150.236/demo/jwslider/” size=”small” target=”self”]Demo[/button]          [button link=”https://github.com/maxlibin/jwSlider” size=”small” target=”blank”]Download[/button]

Lets start with the basic html first
I have included 4 javascript files
jquery1.8.js
jquery.mousewheel.min.j
jquery.easing.1.3.js
Script.js (you can see the code below or download the whole package)
I have also included the html5shiv that allow me to render Html5 in older browsers.

[cc lang=”html”]




we will need a few things for the html file,
two navigation button left and right
[cc lang=”html”]

An item status that will show current item index
[cc lang=”html”]

1/6

Now here comes the slider and the contents / text / descriptions that you like.

[cc lang=”html”]

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

now you have the basic html ready here is how the html should looks, if you want to copy and paste…
[cc lang=”html”]





jwslider



1/6

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.

  • augue elit nisi odio elementum, integer cum nunc dignissim! Lectus integer? Nascetur cursus lacus mid tincidunt porttitor ac odio porttitor habitasse.


now we need to setup the css file to hold the sliders and make it stack on top of each other.

/*----------------------------*/
		/* CUSTOMS 				*/
			
			body{
				font-family: Arial, Helvetica, sans-serif;
				color:#555;
				text-shadow:0 1px 0 #fff;
			}
			
		/*----------------------------*/	
		/** MAIN CONTAINER			*/
			.container {
				background:url(../img/bg.gif) repeat;
				width:950px;
				min-height:600px;
				position:relative;
				overflow:hidden;
			}
			
			/*----------------------------*/
			/* LOGO 					*/
				.header a.logo {
					display:block;
					padding:8px 0 0 20px;	
				}
			/*----------------------------*/
			/* STEPS */
				.page_icons {
					display:block;
					position:absolute;
					right:20px;	
					top:50px;
				}
				
				.page_icons p {
					display:block;
					float:left;
					font-size:24px;
					color:#555;
					padding:13px 15px 0 0;
				}
				
				.page_icons p span { 
					font-weight:bold;
					font-size:28px;
				}
		/*----------------------------*/
		/* NAV AND ARROW BUTTONS	 */
			.nav { 	
				position:absolute;
				right:20px;
				width:50px;
				bottom:0;
			}
			
			.nav a 	{
				background:url(../img/nav_buttons.jpg) no-repeat;
				margin:20px;
				cursor:pointer;
				display:block; 
				width:50px;
				height:47px;
				margin:0;
				padding:0;
				clear:both;
				text-indent:-5000px;
				overflow:hidden;
			}
			
			.nav a.right {
				background-position:0 -47px;
			}
			.nav a.right2 {
				background-position:0 -47px;
			}
		/*----------------------------*/	
		
		
	
	
	.holder {
		width:493px;
		height:355px;
		position:absolute;
		top:140px;
		left:-800px;
		overflow:hidden;
		margin:0;
		padding:0;
		display:block;
		background:url(../img/holder_bg.png) no-repeat;
	}
	
	.holder ul, .holder li {
		list-style:none;
		margin:0;
		padding:0;	
	}
 	.holder ul {
		display:block;
		position: relative;
		width: 487px;
		height: 331px;
		display: block;
		margin-top: 12px;
		overflow:hidden;
	}
	.holder li {
		display:none;
		opacity:0;
		filter:alpha(opacity=0); /* For IE8 and earlier */
		position:absolute;
		margin-top:400px;	
	}
	
	.holder li {
		width:auto;
		height:auto;	
	}
	
	/*** contents ***/
		.contents_holder {
			width:350px;
			height:375px;
			position:absolute;
			top:180px;
			left:530px;
			overflow:hidden;
			margin:0;
			padding:0 0 0 20px;
			display:block;
		}
		.contents_holder ul, .contents_holder li {
			margin:0;
			padding:0;
			list-style:none;
		}
		.contents_holder u {
			display:block;
			position:relative;
			width:350px;
			height:355px;	
		}
		.contents_holder li {
			width:350px;
			display:none;
			opacity:0;
			filter:alpha(opacity=0); /* For IE8 and earlier */
			position:absolute;
			margin-left:100px;
		}
		
		.contents_holder li ul {
			width:370px;
			display:block;
			overflow:auto;
			margin-bottom:10px;
		}
		.contents_holder li li {
			width:370px;
			display:block !important;
			position:relative !important;
			opacity:1;
			filter:alpha(opacity=100); /* For IE8 and earlier */
			margin:0 !important;
			clear:both;
			margin:0 0 20px 0;
		}

and javascript

$(function(){
	
	/** start of animations **/
	// create the function of the first time start animation
	function BoxComeIn() {
		// the mainholder slide in
		$('.holder').stop().animate(
		{ left: 0 }, {
			duration: 1200,
			// using jquery easig plugin for easing.
			easing: 'easeOutQuart'
		});
	}
	// start the funtion 
	BoxComeIn();
	
	function scrollDown(){
		var ulTopMargin = parseInt($('.holder ul').css('marginTop'));
			
			/*------------------------------------------------*/
			/* Get the current index number of the slide in **/
				var myNumeberM  = $('.holder ul li.current').index() + 2;
				// User the Index Number to put into the Current Step Number	
				// Maker Text				
				if(myNumeberM == '7'){
					$('.page_icons p span').text('6');
				} else {
					$('.page_icons p span').text(myNumeberM);
				}
			/*-----------------------------------------------*/	
			$('.holder ul li.current').next().stop(true).fadeIn(function(){
				$(this).addClass('current');
				$(this).prev().stop(true,true).animate({
					marginTop: '-400px',
					opacity: 0	
				},200).fadeOut();
				$(this).prev().removeClass('current');
				$(this).stop(true,true).animate({
					opacity:1,
					marginTop:'0px'	
				},{
					duration:600,
					easing: 'easeOutBack'
				})
			});
			
			$('.contents_holder ul li.current').next().stop(true).fadeIn(function(){
				$(this).addClass('current');
				$(this).prev().stop(true,true).animate({
					marginLeft: '-100px',
					opacity: 0	
				},100).fadeOut();
				$(this).prev().removeClass('current');
				$(this).stop(true,true).animate({
					opacity:1,
					marginLeft:'0px'	
				},{
					duration:600,
					easing: 'easeOutBack'
				})
			});
			
	}
	function scrollUp(){
			/* Get the current index number of the slide in **/				
			var myNumeber  = parseInt ($('.holder ul li.current').index());
			
			if(myNumeber == "0"){
				$('.page_icons p span').text('1');		
			} else {
				$('.page_icons p span').text(myNumeber);
				
			/*-----------------------------------------------*/	
			
			$('.holder ul li.current').prev().stop(true).fadeIn(function(){
				$(this).addClass('current');
				
				$(this).next().stop(true,true).animate({
					marginTop: '400px',
					opacity: 0	
				},200).fadeOut();
				$(this).next().removeClass('current');
				
				$(this).stop(true,true).animate({
					opacity:1,
					marginTop:'0px'	
				},{
					duration:600,
					easing: 'easeOutBack'
				})
				
			});
			
			$('.contents_holder ul li.current').prev().stop(true).fadeIn(function(){
				$(this).addClass('current');
				
				$(this).next().stop(true,true).animate({
					marginLeft: '100px',
					opacity: 0	
				},100).fadeOut();
				$(this).next().removeClass('current');
				
				$(this).stop(true,true).animate({
					opacity:1,
					marginLeft:'0px'	
				},{
					duration:600,
					easing: 'easeOutBack'
				})
			});
			
		}	
	}		
	$('.holder ul li:first').fadeIn(function(){
		$(this).animate({opacity:1, marginTop:'0px'	})	
	});
	$('.contents_holder ul li:first').fadeIn(function(){
		$(this).animate({opacity:1, marginLeft:'0px'	},{
			duration:600,
			easing:	'easeOutBack'
		})	
	});
	// on wheel scroll
	$('body').bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
       scrollUp();
	  // $('#maker').one('mousewheel');
    }
    else {
        scrollDown();
		//$('#maker').one('mousewheel');
		}
	});
	
	$('body').mousewheel(function(event, delta, deltaX, deltaY) {					
		if (delta > 0){
			scrollUp();
		} else {
			scrollDown();	
		}
	});
	
	// on click of right side and leftside
	// click on rightside
	$('.nav a.right').click(function(){
		scrollDown();
		return false;
	})

	// click on left side 
	$('.nav a.left').click(function(){
		 scrollUp();
		 return false;
	})
	

})
  • I see, I supspoe that would have to be the case.