Jump to content


How to transition through a few images?


  • Please log in to reply
3 replies to this topic

#1 CheckOne



  • Joined: 01-August 09

Posted 01 February 2013 - 14:46

Hi there everyone. I've done a couple of simple websites for local businesses (All people I know) and one asked me to add a banner at the top. So I created a div and set the banner image as the background. It worked very well. Now though, they just asked me if they could put 4 different banner images up there and have it transition through the images.

Does anyone know if I can do this with html or css?

I've never done anything like that and did a few searches online and found a couple of interesting posts but nothing that I could make work.

So I figured at this point I should ask and see if anyone has done this on here and how best it can be done.

Thanks, :)

#2 Nick H.

Nick H.

    Neowinian Senior

  • Tech Issues Solved: 19
  • Joined: 28-June 04
  • Location: Switzerland

Posted 01 February 2013 - 14:51

Looks like you could put something together using CSS and jQuery. I found this code which I imagine you could rework to fit what you were looking for (for example, rather than the continuous scroll like they show in the example, tweak it to switch every x seconds).

Sorry if it's not quite what you're looking for, I've been out of the game for a while now.

#3 Tidosho


    Electronics, Software & Computer Engineer

  • Tech Issues Solved: 1
  • Joined: 14-March 10
  • Location: Birmingham, UK
  • OS: Windows 7 & Linux Mint
  • Phone: Samsung Galaxy S3 & Note 2 16GB

Posted 01 February 2013 - 15:44

The Mandigo theme for Wordpress has this feature for the theme header, I use both on my blog! It cycles on page refreshes, and I think it can be timed too :)

I'm not sure if this'll help but here's a snippet. It uses PHP but might be useful nonetheless for you somehow:

// if we didn't find one but the "random headers" option is enabled
if (!$user_header && $mandigo_options['header_random_image']) {
$user_header = array_shift($user_headers);

#4 OP CheckOne



  • Joined: 01-August 09

Posted 01 February 2013 - 15:58

Thank you both for your help. I'm not using WordPress unfortunately, so I won't be able to use a theme for that.

I will take a look at the example Intrinsica posted to see how that one works. :)

I did find this example here: http://css-tricks.co...ying-slideshow/

But as simple as this one sounds, I still can't get it working. On my site the images are showing stacked one below the other (Instead of all in the same place) and they also don't fade. LOL I wasn't sure where to put the jquery file so I placed in in a jquery folder in my website directory and then also in the directory with my css and then also in the directory with the html files. Still no luck. :(