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 🙂
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?
I cover that using the Coda Slider. Here is the video Edit the Coda Slider. I hope it helps
Your tutorials are very helpful. Came across them on youtube and I’ve been hooked ever since.
Please keep up the good work.
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!
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.
Solved it by using different class names for scroll-pane.
Great! I’m glad you got it working. Thanks for posting your fix
The scroll bar won’t reach either end after resizing window in different sizes.
You need to adjust the size of the surrounding container and that problem will go away. Tell me if you need help
I was caught up with something else. I sure will try it out.
By the way, are there any wordpress plugins with pre-order functionality?
I’m not sure what you mean by pre-order functionality
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!
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
Thanks for the reply, I’m going to watch them right now!