Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Thanked 0 Times in 0 Posts

    Fading Slideshow with Clickable Buttons

    Hello. I am very new to Javascript. I have been learning from online tutorials and have a question. I am trying to create a page with an automatic fading slideshow (no arrows, just a continuous loop). I would also like to have clickable buttons in front of the slideshow that remain stationary while the show is transitioning behind them. I know there are a number of plugins I can use to create the slide show, but I'm unsure if I can add the buttons to any of them. Can you point me in the right direction to a tutorial that would offer code for something like this or have any suggestions as to how I can accomplish this? I have attached a sample of what I mean. Thank you.
    Attached Thumbnails Attached Thumbnails -design2a-jpg  

  2. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,947 Times in 4,908 Posts
    By this you mean you want the buttons to be *ON TOP* of the slideshow? Effectively, the slideshow is a background for the buttons?

    If so, this is 100% a CSS issue. No JavaScript involved.

    You just have to have two <div>s positioned one on top of the other. You use CSS's z-index to indicate which is on top (higher value of z-index). Then in the <div> that is on top, you position your buttons where you want them. In the <div> on the bottom you run the slide show. Presto. You are done.

    Note that the <div> on top should have a transparent background, but it should get that by default. If you want to be really safe:
    <style type="text/css">
    div#slideshow {
         position: absolute;
         top: 150px; left: 0px;
         width: 100%; height: 800px;
         z-index: 1;
    div#ontop {
         position: absolute;
         top: 150px; left: 0px;
         width: 100%; height: 800px;
         z-index: 10;
         background-color: transparent;
    Be yourself. No one else is as qualified.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts