Make a JQuery Slider
In 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
another cool tutorial from the same cool gay
thank you derek
Thank you for watching all of my videos. I really appreciate it
thank you. i like jquery
JQuery is awesome!
Your videos are unbelievable.
Very clear and concise.
Delighted to have found your tutorials, they’re appreciated!
Thank you. I’m glad you like them
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!
I have a ton of them. Many of the projects that follow this tutorial include JQuery to some extent. I’m glad you like them
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
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.
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.
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.
Thank you !
You’re very welcome