How to Build a Content Slider jQuery Plugin
videos

How to Build a Simple Content Slider jQuery Plugin

on Oct 30th 2009 with 88 comments

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?


Other Viewing Options

P.S. Speed Up

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);

Conclusion

This is the only the first step. In the next screencast, we’ll continue refining this plugin, and adding more options/conveniences.

Thank you, Screencast.com!


Screencast.com

…for providing the hosting for these video tutorials.


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • http://tpmcafe.talkingpointsmemo.com/talk/blogs/john_lennon albuterol sulfate

    Hi there, I bring prevalent your blog via Google while searching in the course of cardinal grant-in-aid correct to the fait accompli that a nub spell and your transmit looks straight up exciting for me

  • http://blacklabel.lt Matt

    Hi Jeff,

    I love your code, every thing you write is easy to read and understand :)

    I’m trying to implement your code, but with a slight modification. My goal is to assign a pause time for each element, eg.:

    ……

    ……

    ……

    The problem is, that the setInterval function sets a defined variable, and I can’t change it after it’s initiated, and applying a delay or timeout function inside the setInterval, doesn’t have any effect.

    Inside the setInterval function, right before the animate function closes, I added this:

    var pause = parseInt($this.children(‘:first’).attr(‘time’))+100;
    $(‘#time’).text(pause);

    and it correctly displays the current elements pause attribute.

    Is there ANY way to pause the interval, or modify its pause variable?

    Thanks :)

    • http://blacklabel.lt Matt

      The html got stripped, here it is:

      <div id=”slider”>

      <div class=”content” pause=”2000″>
      ……
      </div>

      <div class=”content” pause=”5100″>
      ……
      </div>

      <div class=”content” pause=”8300″>
      ……
      </div>

      </div>

    • http://blacklabel.lt Matt

      Hmm.. I know this is an old thread, but there are some horrible issues with the sliding effect and IE 7 and bellow, all of the divs get stacked instead of being hidden :/

    • http://blacklabel.lt Mat

      I’m probably the only one on this thread :)) if a mod could cleanup my rumblings, I wouldn’t mind :D

      The IE slider bug, with all of the div’s getting stacked and not hidden, is simply fixed by adding position: relative; to the slider-wrap, on line 39:

      $this.wrap(‘<div class=”slider-wrap” style=”position:relative;” />’);

      If fixes IE7 and bellow (for some reason..)

      Instead of modifying the code here, I just took the animation and principle of moving the first child to the end of the stack (my brains couldn’t come up with something so simple..)

      Here’s what I came up with, concerning the problem that I had – applying a set time interval individually to each element child:

      function slideImages() {
      var pause = 0;

      $(‘#slider .content’).each(function() {
      var $this = $(this).parent();
      pause += parseInt($(this).attr(‘time’));

      setTimeout(function() {
      $this.animate({‘left’ : ‘-’ + 666}, 1000, function() {
      $this.css(‘left’, 0).children(‘:first’).appendTo($this);
      })
      }, pause);
      });

      setTimeout(function() {
      slideImages();
      }, pause+1200);

      }

      slideImages();

      I know, I know, this is crappy code.. But it suites my needs right now :) Also, this way, the next loop get’s called only when the first one is done. I noticed that using Jeff’s slider, after a minute or so, if there’s alot of content and other js on the page – the slider get’s really laggy. I’m not sure about the fade option, but with sliding – it gets awful fast.

      Anyway.. Hope this helps someone :)

  • Marc

    Hi,

    I love this slider but it doesn’t work in IE7…I need to use it on my new site but soon realised IE7 won’t display the function properly. It basically shows all of the text list items in a horizontal line. It still slides accross but instead of you only seeing one list item slide across at a time you see all of them.

    I’ve been up all night trying to find a solution but just cant figure it out.

    Any ideas?

    Thanks in advance.

    Marc

  • eAraya

    I can’t figure out how to position the slider. Can someone help me? When I move it I seem to break the size of the box.

    • http://www.media-kreatif.com Edy

      I tought that we just need to set in our css.
      You can wrap your image slide and content slide with div tag, then set the rule in your css using float, margin and padding until you git the position you want..

  • http://www.media-kreatif.com Edy

    net tuts+
    I Love your code…
    It is easy to understand for the newbie like me…

  • http://www.labinterio.com Fume hood

    Thanks for Info. . .

  • http://www.icipl.co.in flats

    useful info thanks

  • http://www.aarthimarketing.com aarthi

    These here is a nice list of resources.I must say thank you for this great list!.

  • http://www.bendaggers.com/ Ben Daggers

    Hi There!

    I’m having trouble modifying your code. What i what to do is like this:

    Represents content for div 1
    Test me1.1
    Test me 1.2

    Represents content for div 2
    Test me2.1
    Test me 2.2

    Represents content for div 3
    Test me3.1
    Test me 3.2

    #jwCONT {
    margin: 50px 0;
    }

    #jwCONT div {
    width: 600px;
    height: 450px;
    line-height: 450px;
    text-align: center;
    color: white;
    background: #0F0 ;
    }

    #1 {
    width: 300px;
    height: 450px;
    float: left;
    background-color:#CCC}
    #2 {
    width: 300px;
    height: 450px;
    float: left;
    background-color:#F00}

    #3 {
    width: 300px;
    height: 450px;
    float: left;
    background-color:#F00}

    To summarize, i need to make a automatic sliding divs. The every divs is divided into (let’s say) two parts. The problem is, i cant get it work by that code. I also copied the .js codes in this tutorial.

    thank you bery much!

  • Kevin

    Very nice and simple! But I’m having one small issue…

    2 out of the 3 slides repeat twice before moving on to the next slide. Any ideas?

    Here’s the link: http://landing.equilibriumfit.com/

  • kevin

    don’t know if anyone is still following this post, but just incase…How about instead of rotating images based on z-index, what about adding a class ‘active’. The following cuts out the need for the “for” loop and rotates the images based on which li has an active class. Any reason why this wouldn’t be a good idea?

    $this.children().hide();
    $this.children(‘:first’).show().addClass(‘active’);

    function fade() {
    setInterval(function() {
    var current = $this.children(‘.active’);
    var next = ($this.children(‘:last’).hasClass(‘active’)) ? $this.children(‘:first’) : current.next();

    next.addClass(‘active’).fadeIn(options.speed);
    current.removeClass(‘active’).fadeOut(options.speed);

    }, options.pause);
    }

  • Paul

    Hi, thx for the quick guide to a simple plugin! It’s helped me to learn how some of the larger ones work. I’m actually in the middle of a project and I’m looking to customize a slider plugin I’m already using and would be very interested if you could show how to incorporate a counter like “1 of 4″ to this slider. I’m just not really sure how to approach it but I feel like it’s something many could benefit from because it seems a little tricky. Let me know if you can help.

    Thanks

  • Noobzken

    Nice tutorial, Is it possible to redirect to another page after displaying 4 slides. Thanks

  • Ernest

    Thank you Mr Jefery way. I am indeed grateful. You helped me to overcome issues beyond my control. in this slider tutorials. I love the efforts you are making. Keep it up. May God almighty bless you abundantly. You will be known in all the corners of the earth for your work. All the best in your career jefery.

  • Chris

    Hi Jeffery. Great tutorial. However, my slider disappears and reappears with page refreshes in Chrome. Do you have any idea why that could be happening?

  • Azazel

    Im having the same issue with Chrome i have to refresh the page before the slider apears, i’ve moved the code into a document.ready()…, change the js code to the top, etc… and still can’t make it work in Chrome, im guessing it has something to do where we are placing the JS code

  • http://kamupipnup.org/ KAMUPI PNUP

    Great!! >,<
    Guys, i'm newbie in web programming :')
    anyone know how to disable auto play and use navigation in this script? Thanks~

← Older Comments