jump to navigation

Creating Content-Sliders with JQuery September 19, 2011

Posted by Tournas Dimitrios in JQuery.

A web-developer   could always use a Content-slider on the landing page to show certain works or blog post that he wish to highlight .  A couple of years ago  I would say ” The simplest method for achieving this – – is the  Flash-IDE (loading external text-file into the swf-engine )  ” ,  but nowadays , client-side scripting frameworks ( JQuery , DoJo , YUI ….   ) have made this achievement simpler . JavaScript is not my strongest point ,  fortunately ,  experienced  JQuery developers  have released Content-sliders that only need a few configurations  . This article will present some scripts I have found on the web that create Content-sliders  . All credits goes to the developers of these plugins🙂 .

The reader should have at least basic knowledge of JQuery ( how to embed  the framework-code into the page , an ECMA-based scripting language like ActionScript 3 or Javascript ) .

  • jFlow Plus :  It’s a good slider  with auto slide functionality and  easily to implement (is an extension of the original jFlow Slider ) . Configuring it’s functionality is achieved by passing options during it’s initialization process .The official website has excellent examples . See an practical example here >>>> .
    < $(document).ready(function(){
    controller: ".jFlowControl", // must be class, use . sign
    slideWrapper : "#jFlowSlide", // must be id, use # sign
    slides: "#mySlides", // the div where all your sliding divs are nested in
    selectedWrapper: "jFlowSelected", // just pure text, no sign
    width: "800px", // this is the width for the content-slider
    height: "350px", // this is the height for the content-slider
    duration: 400, // time in miliseconds to transition one slide
    prev: ".jFlowPrev", // must be class, use . sign
    next: ".jFlowNext", // must be class, use . sign
    auto: true // true or false
  • Start-Stop content slider : Nice slider with only a start/stop button . Besides the core JQuery library , this code has only 2k file-size . See an practical example here >>>> and download the zip-file .
  • JQbanner :  By un-commenting some lines in the script we can define : horizontal , vertical and fade-in/fade-out properties .  See an practical example here >>>>  and download the zip file  .
  • Text-Banner :  Good for creating banner-text into the side-bar (auto scroll – no control buttons )  . See a practical example here >>>> and download the zip file .
  • Scroll Up Headline Reader :   a rotating headline box in which the headlines, in succession, scroll up into the box, pause, and then scroll up out of the box . With a bit of extra code the scrolling effect will pause during mouse-over .
    var headline_count;
    var headline_interval;
    var old_headline = 0;
    var current_headline = 0;
    headline_count = $("div.headline").size();
    headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
    $('#scrollup').hover(function() {
    }, function() {
    headline_interval = setInterval(headline_rotate,5000); //time in milliseconds
    function headline_rotate() {
    current_headline = (old_headline + 1) % headline_count;
    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
    $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");
    old_headline = current_headline;


1. sarah - October 14, 2011

I really need this tutorial. Is there any sample from the web that use this slider script?

tournasdimitrios1 - October 14, 2011

Visit this “slider-showcase” link , let me know which slider you would like to implement into your site and I will send you the source code .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s