Ultimate JavaScript Slider and Scroller

Javascript, XHTML 37 responses so far

This versatile and lightweight JavaScript clocks in at less than 3.5kb unpacked. The above example is one of four scenarios I have demonstrated on the demo page.

To setup a scroll/slide area create a container with the following CSS properties…

position:relative; overflow:hidden; height:XXXpx;

Inside the scroll area container create another div that will house your actual content. It needs the positioned absolutely within the previous div. Each sliding or scrolling area on the page needs to have a unique ID for this div.

position:absolute;

Inside the content div you can need to create a section for each area of content, be it 1 or 50. For each section after the “prefix-” numerate the order from 1 onwards. The prefix (ie section, newssection, imgsection, etc) needs to be unique to the current sliding/scrolling container’s sections.

<div id="section-1" class="section"></div>

You can call functions to incrementally scroll up or down, scroll to a particular section and initiate autoscroll/cancel the autoscroll. Take a look at the source code for examples. You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Michael (see all)

  • Pingback: Scroller and Slider | milo

  • Grab

    Ultimate is not the proper word.
    It should degrade a lot better with javascript turned off to deserve that word.
    You should use javascript to set some css attribute.

  • http://www.leigeber.com Michael

    @Grab – Per my post “You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.”

  • http://www.pokerzen.co.uk Phil

    Thanks Michael, this is definitely something i am going to use on my site.

    nice post :)

  • Pingback: 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars

  • Pingback: javascripts

  • Pingback: JSPT - テキストnoスライド

  • Pingback: 30个 Ajax/Javscript 滑动门, 滚动栏和滚动条技术 | 帕兰映像

  • http://www.wdinamo.com fullmental

    thanx Michael. this is very useful clean and easy to use…. i wonder if it can be configurable like a loop… i mean. the after the last item loads the content again without scrolling up to the begining. it will be nice!

  • http://www.leigeber.com Michael

    @fullmetal – It could be and I might specifically create a script for that functionality before too long. The current script could be modified to update the DOM dynamically to create the continuous loop effect. Shoot me an email if you need the script soon and I will help you work it out.

  • glove

    can this script be configured to autoplay the slideshow when the web page loads? i tried putting

    onload=”autoScroll(‘imgslider’,’imgsection’,5,true)”

    on the <body> tag..
    there’s an error..

    any idea how to go about getting this right?

  • http://www.leigeber.com Michael

    @glove – Sure, on the demo page the first example is doing just that. If you are still having a problem email me a link and I will take a look.

  • bolleone

    hi michael, great script!! I use it on http://www.martin-franssen.de/de/klienten/case-studies.php for displaying a scrollable list of news entries. everything’s fine exept a strange behaviour using the Internet Explorer 6: if you are scrolling using the two icons on the right side the text is going to be bolded od blurred… any suggestions?

  • Aditya

    Would it be possible to load the content via an XML script? That would make this really, really useful, not to mention easy to use.

  • mario

    very nice script…
    i started with preparation to use it on my test web site then i notice that it has a very poor quality of display on IE7 (it distorts text therefore its difficult to read)
    its that possible to fix in some of the next versions?
    thx!

  • http://www.leigeber.com Michael

    @bolleone – I just tested in IE6 and it looks good to me. Shoot me an email if you are still having problems.

    @Aditya – Sure that could be done. You would just need an onload event that parses the XML and builds out the markup to the page. Shouldn’t be difficult.

    @mario – I don’t know how I missed that before, I definitely see what you are referring to. Once you start scrolling the distortion kicks in. I will look into this asap and post an update.

  • http://www.stefson.com Stefson

    That looks really great. Nicely done.
    I’m going to try and integrate it into a site of mine.

    Thanks for the freebie :)

  • Jim

    I’m testing this to include on a website but on ie6 and ie7 on scroll the text gets a little unreadable and color turns to black.

    The solution that I found is setting font-family: verdana; inside .slider i think that the browser don’t reconize some fonts after the javascript effect, like sans-serif and otyhers.

    .slider
    {
    font-family: verdana;
    }

    I hope this helps some guys.

  • Shawn

    Oh this is a nice small script. I haven’t looked at code in probably 4 years and wanted to do a small site where I needed to keep some text in a scrollbox to keep the display height down. Stumbled on this from somewhere and decided why not give it a crack since I couldn’t do it in straight CSS. Started pulling it apart and moved all the elements around after looking at the markup instead of just keeping the up/down at the top of the box. Also ended giving the scroll speed a boost since on the mobile safari version it just scrolled too slow. Desktop safari it’s fine so it’s probably just related the the processor clock of the phone/touch unit.
    Should stick a donation link up I’d kick in a buck or two if I eventually use it on a production site.

  • http://www.paulvincemike.com Paul Vincemike

    I was wondering if you could create a horizontal version of the news ticker too?

    Thanks!

  • Emanuele

    Thank you for sharing your code Michael!
    @bolleone, @mario, @Jim: I’ve encountered same problem as yours. I think the problem is in the style.filter = ‘alpha(opacity=, in javascript code. Probably ie6 has a different syntax for setting opacity.
    Infact, commenting those lines in javascript, the problem disappears, but opacity effect too!
    I’ll try to solve the bug and post the solution if found.

  • Emanuele

    I noticed also that the problem is only present if you have ClearType enabled (http://www.microsoft.com/typography/cleartype/tuner/step1.aspx)

  • http://www.leigeber.com Michael

    @Paul – Will add it to the very long overdue to to-do list. Thanks.

    @Emanuele – Still need to look into the issue but I figured as much. There may not be a resolution besides removing the opacity effect altogether.

  • Stefanie

    Hi Michael,
    thank you for posting your Code :)

    @emanuele: in ie6 an ie7 i have the same problem with those ugly fonts. If the font-weight is set to “bold” in CSS, the text turns very ugly (sorry, i’m no native english-speeker, and don’t know the right word, ugly sounds hard, but I just don’t know a better one) when i start the scrollContent function.

    Commenting the lines of “div.style.opacity” and “div.style.filter” in scrollContent function doesn’t work for me …
    Has anyone an idea how to get the bold text fine for ie6 & 7?

  • Emanuele

    I found a workaround for the ClearType bug (ie6 & ie7): just put a background color to slidercontent css class (for example: .newsslidercontent {position: absolute; background: #eef5f6; } ).

    Thanks to: jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

  • hoax

    Would it be possible to include a “enablepersist” variable with cookies as well to be able to keep the last viewed content when the user is reloading the page in the sectionslider? Or could someone link or guide me to how it’s done with this slider?

  • Dai Kane

    For couple oddities with various browsers about opacity, consider…:

    item.style.opacity=(opval/100);
    item.style.MozOpacity=(opval/100);
    item.style.KhtmlOpacity=(opval/100);
    item.style.filter=’alpha(opacity=’+opval+’)’;

  • cameron

    Is there a way to get this to stop when the mouse rolls over each piece of news? Also is there a way to get it to continue scrolling as opposed to going back to the top? then i could remove the pause and resume? other than that it is a great scroller.

  • Genia

    can somebody take look and help me with weird issue i have with the scroller?
    http://www.dynamicdrive.com/forums/showthread.php?t=39066

  • jonny

    I have tried implementing this (brilliant) slider/scroller… however I cant get it to autoscroll and restart when it gets to the last item. In the autoscroll example it scrolls back up to the first item when it reaches the bottom. Mine wont do that. Also, it would work better for me if it looped (ie. circular sliding), you mention this may be possible in a previous post… have you looked into this? My JS isn’t good enough to work is out. Thanks in advance!

  • jonny

    Don’t worry I got it sorted. It didn’t like having a float clear inside each news item. The circular looping thing would still be helpful…. Cheers

  • jonny

    also…. (sorry), how would I add functions to side ‘Previous’ and ‘Next’… ??

  • mario

    @emanuelle Thx for the resolution! i think i can live without opacity too! :-)
    @michael thx again for the really nice small but versatile&rich plugin! :-)

  • http://www.ahstsa.org jasondrey13

    Thank you for making this available! Is it possible to run two or more of the newsslider widgets on the same page? I am trying to run three separate ones, all with unique ids and variables. I have created an onload function that calls three separate autoScroll functions, but when I load the page, none work. I have checked to make sure that all the ids and variables match up, but I am not yet good enough with javascript to find a bug in the script. Thanks for any help!

  • http://www.leigeber.com Michael

    A new script will be published soon replacing this one. All issues above will be addressed. Comments are now closed.

x
Loading...