| ActiveDen | Flash Marketplace |
| ThemeForest | Web & CMS Themes |
| GraphicRiver | Graphics, Vectors & Icons |
| VideoHive | Motion Graphics & Projects |
| AudioJungle | Loops & Effects |
| FreelanceSw | Freelance Jobs & Community |
| Rockable | Books & How-To |
| Creattica | Design Community |
| Mac.AppStorm | Mac Apps |
| Web.AppStorm | Web Apps |
| WorkAwesome | Be Awesome At Work |
| Envato | About Us |
| More Coming Soon! |
I was recently asked by a reader to recommend a helpful content slider plugin. No doubt, there are a bunch of excellent options available -- some which are, perhaps, too excellent! With so much flexibility comes extra weight; especially when sometimes you only need a simple slide or fade transition.
So I figured, why not build a simple custom plugin that will get the job done?
Don't forget to take advantage of bundles when working in Textmate. If you need a helpful snippet to jump-start every new jQuery plugin, create a new snippet in Textmate, paste the following code in, and then assign a short-cut - like "jqueryplugin."
(function(\$) {
\$.fn.$1 = function(options) {
var defaults = {
$2
},
options = \$.extend(defaults, options);
this.each(function() {
var \$this = \$(this);
$3
return this;
}); // end each
}
})(jQuery);
This is the only the first step. In the next screencast, we'll continue refining this plugin, and adding more options/conveniences.
Check out some more great tutorials and articles that you might like
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
We pay $150 for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Community Link Feed
One name? One name? Who are you Seal?
The effects and techniques demonstrated in tutorials on the Tuts+ network can be used in whatever manner you wish without attribution.
The text, images and tutorials themselves are copyright their respective owners.
You cannot copy whole tutorials, either in English or translated to another language.
Writing a tutorial or article for the site is not only a great way to get exposure and give back to the community, but we'll also give you $150 cash to boot!
This is YOUR site, so if you have suggestions or feedback on how we can improve it for you, please let us know! We do our best to keep up!
User Comments
( ADD YOURS )Christophor S. Wilson October 30th
I’m First, Very Nice Tut!
( )Caroline Schnapp October 30th
I really like where this is is going.
( )Derek Herman October 30th
Jeff, the video is gigantic and over taking the sidebar, can you please fix the width so it looks like it belongs there?
( )Derek Herman October 30th
Looks like you beat me to it! By the time I replied it was fixed, you’re awesome.
( )Jeffrey Way October 30th
Hey Derek – You must have loaded the page within a moment of an update.
Evan Jones October 30th
Man, I never get tired of sliders. Especially when the holidays are coming up quickly
Nice choice of images.
( )Los Diggity October 30th
Nice Flex video player. Any chance of getting a tutorial on that? Thanks Tuts!
( )David Ferguson October 30th
Lol this looks vaguely familiar JW
( )Jeffrey Way October 30th
You had some interesting ideas that I learned from.
But we’ll be doing a lot more with this one and the follow-up screencast.
( )David Ferguson October 30th
I actually made a crossfade plugin screencast right after the contest ended ha. One thing I can say that I did a little different in respect to the fading, was instead of using the css function to adjust the opacity, I used the jQuery fadeTo function. Also, instead of removing and appending the items fo the fade, I did:
1. Grab first item
2. Grab next sibling, set z-index to just below the top one
3. Fade the top, then adjust its z-index to lower.
4. Set the now top item to very top z-index, and set it to the new top
5. Loop
I uploaded it to Blip.tv and it’s had a whopping, 0 views
Jeffrey Way October 30th
Do you have a link for us to watch?
Jeffrey Way October 30th
I’m curious to see more exactly how you worked around the z-index issue – as I’m pretty sure that my way is too intensive and probably unnecessary.
dave October 31st
David Ferguson’s
Creating a jQuery Crossfade Plugin
http://blip.tv/file/2717716/
David Ferguson October 31st
This is more of what I was talking about. I sent an email to you as well with the actual source code file but I figured I would share a link here as well in case anyone else wanted it.
http://snipplr.com/view/22241/jquery-crossfade-plugin/
icetrix November 11th
A follow up? Awesome!
Raspo October 30th
A new screencast from Jeffrey Way!
This will be high-quality stuff like always…
( )…let me see…
Bryce October 30th
What program did you use to record the Screencast?
( )Jeffrey Way October 30th
Camtasia Studio.
( )Rhonda November 1st
More questions on making the screencast, if you have a moment.
What screen resolution do you use when you record?
What size is the area of the screen you record?
What output size do you use when you publish?
Could you do a video of how you setup, record, and publish your screencasts that includes that information?
designfollow October 30th
thanks for this great post
( )Jack Franklin October 30th
Great stuff as always – one thing I don’t get is why you use appendTo in the slide method?
( )webmasterdubai October 30th
really nice plugin good post
( )Kalvster October 30th
This seems useful for future designs. Thank you!
( )Roaa October 30th
Awesome tutorial Jeffrey Way
i was thinking about this yesterday. Mind reading c”,)
( )David Moreen October 30th
Really nice to see a new video if the week. I’m been having lots of fun going back and attempting to do some of the really old ones.
Not to mention that this tutorial is great, I still have yet to learn how to create a slider from scratch. This takes me one step closer.
( )MasterGates October 30th
This tut will be a great addition to a site I’m working on
( )max li bin October 30th
thanks for the tut
( )nadeem October 31st
Thanks, was waiting for this kind of stuff.
( )Stoian Kirov October 31st
Great! I was waiting for that tutorial!
( )Thanks Jeffrey
Joris October 31st
Really nice but is there a way to add buttons from 1-5 ?
( )Jeffrey Way October 31st
That’ll be in the next screencast.
( )Greg October 31st
Fantastic tutorial, and I’ve passed it around to staff here in our office. One question: can the images be hyperlinked so, if the user clicks on one, it takes them to an assigned URL? What would the code for that look like?
( )Jeffrey Way October 31st
Sure – in your html, just wrap each image with an anchor tag.
( )Max October 31st
Thank you JW, our screencasts are a must. When I see your name in rss reader -> jump over to the site and check it out.
( )Shane Parker October 31st
Jeffrey, I too am interested in the player you used for the screencast. Is this one you built, or one you’ve found/purchased somewhere? It’s a nice player! (flex?)
( )Jeffrey Way October 31st
It’s just the default player that comes with your screencast.com account.
( )Byron McCollum October 31st
Not a full blown plugin, but eliminates the need to to deal with z-index stacking order.
$(document).ready(function() {
$.fn.reverse = [].reverse;
$(’ul’).each(function() {
// Reverse DOM Order, Last Is Always Highest
var list = $(this);
var items = list.find(’li’);
items.reverse();
list.html(items);
setInterval(function() {
list.find(’:last-child’).fadeTo(1000, 0, function() {
// Move To First, Reset Opacity
$(this).prependTo(list).css(’opacity’, 1);
});
}, 5000);
});
});
( )Byron McCollum October 31st
Demo: http://bgmccollum.com/jquery/fader/
( )esranull October 31st
ooo thanks example jquery http://os.laroouse.com/category/jquery/
( )Rasmus October 31st
Where did the Twilight theme in TextMate go?
I liked it so much.
( )Thanks for yet another useful screencast JW.
Jeffrey Way October 31st
Just removed it for the screencasts. I still use it.
( )Slobodan Kustrimovic October 31st
Great screencast Jeffrey.
I have a suggestion considering the little speed VS pause issue.
Pause should actually be time between 2 animations, and as it is now it actually starts the “pause” when an animation starts (and not when it ends, as it should be)
So…
pause += speed
That way we will actually have a real pause between animations and there will be no need for that little hack of yours
Regards,
( )Slobodan Kustrimovic – Boba
TutsValley
Kevin November 1st
Not so pretty on Firefox 2.0 / Ubunto
( )Rick Harris November 1st
Great Tutorial! I find myself building sliders pretty often, and for some reason I’ve never thought of going ahead a building my own jQuery plugin.
I noticed that in the demo, the “slide-wrap” element was only getting styled inside the “slide” if statement, and therefore wasn’t getting styled at all in the absence of a slider that used the “slide” transition.
I came up with a solution where that block of code is moved out of the “if” statement and placed below the “wrap” function. Here’s the changes I made:
// Wrap "this" in a div with a class of "slider-wrap."
$this.wrap('');
$this.parent().css({
'width' : $this.attr('offsetWidth'),
'height' : $this.children().height(),
'overflow' : 'hidden',
'margin' : $this.css('margin-top') + ' ' + $this.css('margin-right') + ' ' + $this.css('margin-bottom') + ' ' + $this.css('margin-left')
});
// Set the width to a really high number. Adjusting the "left" css values, so need to set positioning.
$this.css({
'width' : '99999px',
'height' : $this.children().height(),
'position' : 'relative',
'padding' : 0,
'margin' : 0
});
The “offsetWidth” attribute was used in place of the width() function because Firefox was calculating the width of the li elements as only 585px because of the scrollbars that appeared because of the overflow: auto in the demo css.
The height is set to make sure that the containers fully contain their absolutely positioned children.
I also targeted the “slider-wrap” by using $this.parent() rather than $(”.slider-wrap”) because the latter would effect every slider-wrap on the page (this is why the original problem wasn’t overtly obvious on the demo page).
Hope this is helpful, and not too painfully long of a comment!
( )jeremy November 1st
Great tutorial Jeffrey! I’ve always hated using some of the giant kitchen-sink-type slider plugins out there, because of how much they lock you into their specific css/html structure requirements. It’s very helpful to understand more about how the effect is being created.
( )Aditu November 1st
Dear Jeffrey,
is it possible using jQuery to get some html using XHR and filter it using jQuery selectors BEFORE placing into DOM structure? Is it possible to use jQuery traversing/selecting with HTML that is not part of the document (ie. HTML stored in variable)?
I’m making lots of XHRs to the server and i selects a few pieces of information from the results of these XHRs. Then i use those pieces to update statistics that are on the webpage. It is worth mentioning that i do not control the server with pages I request and use to update stats.
I was thinking I could inject every result into DOM of my page (and work with it using jQuery) but i believe that loading it into DOM would really slow things down (and also images would be automatically loaded and bandwidth would be another waste). Are there any other convenient ways (other than regexp) to select (filter) pieces of information from HTML received as the result of XHR? Is it possible to use jQuery with HTML that is not part of the document?
( )N3T@N1U$ November 2nd
Great Tutorial! tanks
( );*)
Ali Baba November 2nd
Hey Jeffrey
Thanks for tut.
When we will see next CodeIgniter tut?
( )Slobodan Kustrimovic November 2nd
Same question here
( )Stever November 2nd
Is there a best way to load multiple javascript jquery files so it more efficient?
( )Nicolas BUI November 2nd
Nice tut for people who want to write their own slider !
( )I actually use tabswitch plugins as it’s flexible enough and fit my needs .
Nicolas BUI November 2nd
@Stever : the best way to do so is to merge into one file all scripts in order you need.
( )ryan November 3rd
I am having a problem using the plugin, because it is picking up the list item of my horizontal menubar in wordpress, and scrolling it as well. Is there a way to specify in the code the list or a div you want to apply the plugin to instead of the entire page?
( )Pozycjonowanie Olsztyn November 3rd
Very nice tutorial
( )icetrix November 11th
Really, really awesome. I finally found out how to make a slider, and it is pretty simple.
Thanks for the screencast!v
( )Jason Bobich November 14th
Jeffrey,
I’m a huge fan and I’ve learned so much from your screencasts, being a tutsplus member and hanging out on Nettuts.
Like many, I’ve been experimenting with developing Wordpress themes for Themeforest and I have to say that javascript is by far my weakest asset.
Are we allowed to use this tutorial as a base for creating a content slider for a Wordpress theme on Themeforest? Or does that violated copyright issues?
( )Patrick November 18th
It’s not working with I.E. version 7.0
Is there a fix for it? The images do not fade in and out. It simply is “cuts” to the next image.
( )