Make a JQuery Slider

Make a JQuery SliderIn this video tutorial I show you how to make a JQuery Slider similar to the ones Apple uses. This is the final component of my upcoming WordPress shopping cart theme.

I use the JQuery UI slider as a base and then make it into a more useable tool for your websites.

My custom JQuery slider code follows the video. The theme used is available here JQuery Theme Roller.

Leave your questions and tutorial requests below. Feel free to share this video as well 🙂

Code from the Video

<html>
<head>
<title>JQuery Vertical Menu</title>
<link type="text/css" href="css/overcast/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

<style>
	.demo {
		width: 480px;
	}
	#demo-frame > div.demo { padding: 10px !important; }
	.scroll-pane { overflow: auto; width: 99%; float:left; }
	
	.scroll-content { width: 1930px; float: left; background: #FFF;}
	
	.scroll-content-item { width: 150px; height: 215px; float: left; margin: 10px; margin-right: 0px; font: bold 11px 'PT Sans',arial,sans-serif; text-align: center; background: #FFF; border: 0px;}
	
	* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
	.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
	.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
	.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
	.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
	.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
	
	.prodImage {
		border: 1px solid #666;
		height: 135px;
		width: 135px;
	}
	
	.theProduct {
		height: 125px;
		width: 125px;
		padding: 5px;
	}
	
	.prodName {
		position: relative;
		left: -6px;
		top: 15px;
	}
	
	.prodName a {
		text-decoration: none;
	}
	
	.prodMoreInfoBut {
		background-color: #535353;
		height: 17px;
		width: 61px;
		padding-top: 4px;
		position: relative;
		top: 25px;
	}
	
	.prodMoreInfoBut a{
		text-decoration: none;
		color: #fff;
	}
	
	.prodMoreInfoBut:hover {
		background-color: #666;
	}
	
	.prodAddToCartBut {
		background-color: #3c89b5;
		height: 17px;
		width: 71px;
		padding-top: 4px;
		position: relative;
		top: 4px;
		left: 65px;
	}
	
	.prodAddToCartBut a{
		text-decoration: none;
		color: #fff;
	}
	
	.prodAddToCartBut:hover {
		background-color: #666;
	}
	
	</style>
	<script>
	$(function() {
		//scrollpane parts
		var scrollPane = $( ".scroll-pane" ),
			scrollContent = $( ".scroll-content" );
		
		//build slider
		var scrollbar = $( ".scroll-bar" ).slider({
			slide: function( event, ui ) {
				if ( scrollContent.width() > scrollPane.width() ) {
					scrollContent.css( "margin-left", Math.round(
						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
					) + "px" );
				} else {
					scrollContent.css( "margin-left", 0 );
				}
			}
		});
		
		//append icon to handle
		var handleHelper = scrollbar.find( ".ui-slider-handle" )
		.mousedown(function() {
			scrollbar.width( handleHelper.width() );
		})
		.mouseup(function() {
			scrollbar.width( "100%" );
		})
		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css( "overflow", "hidden" );
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar() {
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
			scrollbar.find( ".ui-slider-handle" ).css({
				width: handleSize,
				"margin-left": -handleSize / 2
			});
			handleHelper.width( "" ).width( scrollbar.width() - handleSize );
		}
		
		//reset slider value based on scroll content position
		function resetValue() {
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
				parseInt( scrollContent.css( "margin-left" ) );
			var percentage = Math.round( leftVal / remainder * 100 );
			scrollbar.slider( "value", percentage );
		}
		
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent() {
				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
				var gap = scrollPane.width() - showing;
				if ( gap > 0 ) {
					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
				}
		}
		
		//change handle position on window resize
		$( window ).resize(function() {
			resetValue();
			sizeScrollbar();
			reflowContent();
		});
		//init scrollbar size
		setTimeout( sizeScrollbar, 10 );//safari wants a timeout
	});
	</script>
	
	</head>
	<body>

<div class="demo">

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
	<div class="scroll-content">
		<div class="scroll-content-item ui-widget-header">
			<div class="prodImage">
				<img src="./images/Justrite-09100.png" class="theProduct" />
			</div>
			
			<div class="prodName">
				<a href="#">JUSTRITE 2 GAL OIL HAND OPERATED WASTE CAN</a>
			</div>
			
			<div class="prodMoreInfoBut">
				<a href="#">MORE INFO</a>
			</div>
			
			<div class="prodAddToCartBut">
				<a href="#">ADD TO CART</a>
			</div>
		</div> <!-- END OF scroll-content-item -->
		
		<div class="scroll-content-item ui-widget-header">
			<div class="prodImage">
				<img src="./images/Justrite-09100.png" class="theProduct" />
			</div>
			
			<div class="prodName">
				<a href="#">JUSTRITE 2 GAL OIL HAND OPERATED WASTE CAN</a>
			</div>
			
			<div class="prodMoreInfoBut">
				<a href="#">MORE INFO</a>
			</div>
			
			<div class="prodAddToCartBut">
				<a href="#">ADD TO CART</a>
			</div>
		</div> <!-- END OF scroll-content-item -->
		
		<div class="scroll-content-item ui-widget-header">
			<div class="prodImage">
				<img src="./images/Justrite-09100.png" class="theProduct" />
			</div>
			
			<div class="prodName">
				<a href="#">JUSTRITE 2 GAL OIL HAND OPERATED WASTE CAN</a>
			</div>
			
			<div class="prodMoreInfoBut">
				<a href="#">MORE INFO</a>
			</div>
			
			<div class="prodAddToCartBut">
				<a href="#">ADD TO CART</a>
			</div>
		</div> <!-- END OF scroll-content-item -->
		
	</div>
	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
		<div class="scroll-bar"></div>
	</div>
</div>

</div><!-- End demo -->

</body>
</html>

Till Next Time

Think Tank 

28 Responses to “Make a JQuery Slider”

  1. supprof1 says:

    another cool tutorial from the same cool gay
    thank you derek

  2. alovilla says:

    thank you. i like jquery

  3. Gary says:

    Your videos are unbelievable.
    Very clear and concise.

    Delighted to have found your tutorials, they’re appreciated!

    • admin says:

      Thank you. I’m glad you like them 🙂

      • Ronnel says:

        I love your tutorials man!,, your awesome! I’m just a beginning to learn jQuery and I learn a lot from watching your tutorials.. I’m so glad a watched your jQuery ui tutorials,, Thank you derek,,I hope to watch another jQuery ui tutorials from you… God bless!

  4. Mark says:

    I just wanted to say thank you for all your work.
    I wonder if there is a tutorial how do you actually do all of your tutorials?

    Best regards,
    Mark

    • admin says:

      Thank you. I’m glad you like it. I go over roghly how I make videos in this tutorial Become a YouTube Partner

      It’s kind of funny because almost everything I use is free to download, or came free with my computer. I don’t have anything fancy except for my computer. That only cost me $1,000, but was a tax write off because I use it exclusively for work.

      Everyone always tells me my videos sound so good. I use a $15 Apple headphone microphone 🙂

      If you want to know how to video blog like a pro (Not Like Me) checkout How to Video Blog.

      • Mark says:

        Thank you, I have read Become a YouTube Partner and it is very interesting article.
        I was hoping to find out what your technical setup is, like hardware (PC/MAC)and software you use. Just for people who would like to try to do screencasts like you.

        • admin says:

          I have a Mac 27-inch 2009 model. I record everything with Quicktime Player. I edit everything with iMovie. I use Keynote for presentations. My 2 editors are Text Wrangler and Eclipse. I have an old Kodak Zi8 camera and my microphone is the $15 Apple headphone set you get for iPods.

          Everything for the most part is either free to download, or came for free with my computer. When I started out I used a $200 mac mini and it worked pretty good until I started doing more video editing.

          I eventually will upgrade my screen casting software to Screen flow and I’d love to buy Final Cut Pro X.

  5. Cain says:

    I’ve been using a jQuery slider called jcoverflip and I want to create div boxes that display an enlarged version of the image shown on the slider when double-clicked. So far I’ve been able to create a pop-up interface using the “onclick” tag. Any idea on how to make divs within the page that trigger to show the enlarged image when the slider is double-clicked?

  6. Eugene N says:

    Your tutorials are very helpful. Came across them on youtube and I’ve been hooked ever since.
    Please keep up the good work.

    • admin says:

      Thank you 🙂 I plan on making tutorials on pretty much any topic for a long time. I really enjoy making them and I’m very happy that you like them!

  7. Jay says:

    Thank you for all of your tutorials. They helped me a lot, a beginner. I am trying to make two sliders on top of each other showing two different categories. For the bottom slider I copied the codes and pasted underneath the codes for the top slider and changed the links to the images. The problem is that the images in the bottom slider move in sync with the ones in the top slider as I move the bar in the top slider, and vise versa as I move the bar in the bottom slider. I am not at the level to understand all the codes in detail yet. Any help will be appreciated.

  8. Steve says:

    Hello,
    I want to create a website like <a href="http://lucuma.com.ar/ .
    Can you make a tutorial on this? 🙂
    Also, is there a way i can edit the layout of the scroll bar?

    Thanks for your videos!

    • admin says:

      You’re very welcome 🙂 Check out my Jquery tutorials and my coda slider tutorial. You could make that whole site very easily using just the coda slider with a bit of html and css. If you have any questions send them over

Leave a Reply

Your email address will not be published.

Google+