Create an s3slider-like jQuery Plugin: New Plus Tutorial
plus

Create an s3Slider-like jQuery Plugin: New Premium Tutorial

on Jul 1st 2009 with 35 comments
Download Source Files

In this week’s Plus video tutorial, the creator of the extremely popular s3Slider plugin will show you how to build a similar “slideshow” component using jQuery. What better way to learn how to mimic your favorite plugins than to learn from the creators themselves? This isn’t one you should miss! Become a Plus member today!

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at nettuts+, psdtuts+, and vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Tags: Premium
 
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.

Hello, my name is Boban Karišik, and I'm a Freelance PHP/MySQL developer (programmer). I am based in Belgrade (Serbia), although I have worked with clients all over the world.As a PHP developer, I specialise in building custom PHP/MySQL CMS's and web applications. My skillset also includes xHTML, CSS, Javascript, AJAX, SEO (Search Engine Optimization), and consultation for all of the above.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Aljosa

    Odlican tutorial, bravo :)
    Great tutorial, good work :)

  • http://chrisberthe.com/ chrisberthe

    Nice.

  • http://sffarlenn.net Laneth

    Amazing! Ye guys just always know when to release just what I’m looking at learning and integrating into my jobs. Bravo!

  • http://elinix.com elinix

    its incredible keep up the great tuts

  • Shuuun

    Not that smart for a PLUS Tutorial, bebause there are many of this for free.

    Anyway, good job!

    • http://www.demogeek.com DemoGeek

      I completely agree with Shuuun, it would be nice to see some sample materials before us taking out the plastic. I’m always on the verge of hitting that button but wasn’t sure of the quality of those screencasts (of course, except the one’s done by Jeff).

      • Sara

        I agree, Jeffrey’s tutorials are the best!

  • Shuuun

    Btw, you should only do a little movie about how it works, if you want the people to join PLUS.

    You can get the whole source out of the demo and get the knowledge about this by the jquery docs.

    regrades, Nico

    • http://www.jeff-way.com Jeffrey Way

      You’re welcome to use the demo source code. It’s not about that…it’s about learning how to create it from scratch.

  • proof

    I can’t say this is tutorial for PLUS. Demo effect looks very simple

  • http://myfacefriends.com Myfacefriends

    another amazing tuts! from TUTS!

  • http://labs.dariux.com Dario Gutierrez

    Nice, I use a jquery slide for the news in my blog.

  • JimmyJames
  • https://www.getafreelancer.com/users/755993.html Web010

    Napokon srbin :)
    Svaka cast majstore.

  • Dimitris

    You cant have a div inside ul li this is bad practice and not xhtml valid.

    • http://www.jeff-way.com Jeffrey Way

      Oh sure you can.

    • PNW

      Who said that you can’t? Using a div inside a ul is fine.

      Also, I don’t understand why people post complaints about paying for a tutorial.

      Do you stand outside classrooms and complain that it costs money? If you don’t like it MOVE ON. There’s plenty of free tutorials on the web.

      It’s depressing that there’s these great TUTS on this site and instead of engaging discussion concerning the TUT, we have a bunch of babies and know-it-alls commenting.

      Please, no one cares about your ‘better slider’ or your suspicion that this TUT might not be that good. These whiny comments and ‘This slider is better than your slider’ are childish and best left in one’s own head.

    • http://www.nouveller.com/ Benjamin Reid

      I’m sure you can, it does validate in transitional and strict.

  • Gavin

    This is great as I am not a plus member to get all the code given to me, I joined so I can learn how to do it.

    Thanks again

  • Satk
    • http://www.jeff-way.com Jeffrey Way

      If I remember correctly, Day 14 only demonstrated how to use a plugin. This PLUS tutorial shows you how to CREATE the plugin. Big difference.

      • http://www.jeff-way.com Jeffrey Way

        Not to mention that it was created by the author of one of the most popular slider plugins.

      • Satk

        Really sorry, I just remembered seeing this before never watched it myself.

        Just shows why I should keep my mouth shut.

  • Twas

    The funny thing is jeffrey way did this himself lol

    • http://www.serie3.info/ Boban Karišik
      Author

      I can guaranty you that i did this tutorial, not Jeff ;-)

      Cheers.

  • zigh

    Good effort…

    But it ‘very’ seriously needs a cross fade

  • elkaz

    Well written script.

    To make it cross fade (without testing this)

    just rewrite the fadeOut function as so:

    var fadeOut = function(no) {
    $(captions[no]).fadeOut(fxDuration, function() {
    $(items[no]).fadeOut(fxDuration);
    fadeIn(calcNext(no));
    });
    }

  • gway

    this is awesome,
    thanx for this tut boban,
    it saved me hours of work.
    i tried to have some slider plugins to work in a website, and it always failed to show properly, and learning how to do it fixed all problems.
    thanx a lot

    • http://www.serie3.info/ Boban Karišik
      Author

      you`re welcome :)

  • gway

    but is there a simple way to pause the slider when mouse is on ?

  • http://www.serie3.info/ Boban Karišik
    Author

    Basically it is simple. You need to attach an event to mouseover, and set some global variable to true/false if mouse is over or not, and just before you call fadeOut function you need to check if global variable is set to true or false, if it is set to true, you dont call fadeOut…

  • http://kanha.co.in Jitendra Kushwaha

    very nice example………….

  • http://www.7Mdo.com Hamad Adhbiyah

    nice ..

  • kasra

    hi dear, im kasra, i live in iran , i want to learn s3slider . in my country dosent any card such a visa card or master card .please help me for video learning s3slider to download.

  • kasra

    hi dear, this is kasra haghpanah, i live in iran . i want to learn that how to use s3slider plugins. in my country has’nt been any card such a master card or visa card here, please help me for video learning s3slider to download