Simple Manual Slide Show?

Discussion in 'Web Design' started by Markaholic, May 31, 2009.

to remove all ads.
  1. Markaholic

    Markaholic New Member

    Hello all - I'm looking to create, with CSS and HTML, a simple manually controlled slide show. It should be quite straightforward to program. I have a two buttons, "next" and "previous," and I just want them to cycle through a few pictures that will display above - and I want it to take place on a single HTML page. I'm not sure if the best way is to show/hide the pictures, or use z-index, or use variables (if picture n is displayed, display picture n+1)... or what.

    I'm pretty much trying to do this:

    Thanks for any help you can give me!
  2. LouTheDesigner

    LouTheDesigner New Member

    Any knowledge of javascript? I'm sure you can just get the code for this type of thing from anywhere.
  3. wetgravy

    wetgravy New Member

    Pretty much what you are after can not be done with just html and css. Too simple of a language. Javascript is your best bet and there are probably some existing scripts that will do you just fine.
  4. constanthosting

    constanthosting New Member

    I stumbled across this pretty neat site a few days ago and it has two or three neat little ajax javascript slideshows on it that shouldn't be too hard to implement,
  5. mrandrei

    mrandrei New Member

    Here's a JavaScript to run the manual slideshow:

    // Manual Slide-Show script. With image cross fade effect for those browsers
    // that support it.
    // Script copyright (C) 2004-08
    // Script is free to use provided this copyright header is included.
    var manualPictures = new Array();
    function NextImageSlide(pictureName,imageFiles)
    // Ensure picture list primed.
    if (manualPictures[pictureName] == null) {
    manualPictures[pictureName] = imageFiles;
    } else {
    imageFiles = manualPictures[pictureName];
    var imageSeparator = imageFiles.indexOf(";");
    var nextImage = imageFiles.substring(0,imageSeparator);
    var picture = document.getElementById(pictureName);
    if (picture.filters)
    picture.src = nextImage;
    if (picture.filters)
    manualPictures[pictureName] =
    + ';' + nextImage;

    Good luck! :)

Share This Page