Hi Michael,
you are mostly looking at javascript to implement something like that.
Looking at their source, your html/css would be to layer 4 separate IMG
tags in the same positioning in the document. You use display: none;
styling on all of the IMGs not currently showing. Then you write out a
link for each image below the image area.
For each link, you attach a javascript method that fires on an event
like on click. In this javascript method you may pass in the link that
fired the event, ie. changeSlide( var linkElement ) so you can figure
out which image to display.
Then in the changeSlide method simply create a conditional statement
that checks which link was selected. if(linkElement's id = '1' ) then
hide all other IMGs and show the IMG for link 1. And so on for the rest
of the links.
As for having it play/pause, have javascript methods runSlides() and
stopSlides() as well as a global script variable called keepRunning or
something along those lines. runSlides will enter a loop with the
condition being while(keepRunning) and then inside it will iterate
through the IMGs like mentioned in the changeSlide method. To give the
pause between slides, use the javascript method
self.setTimeout("nextSlide()", delay); This method waits 'delay'
milliseconds and calls the function nextSlide() after 'delay'
milliseconds occurs. Delay might be 1000 if you want to wait just 1
second between slides. In stopSlides() you simply set keepRunning to
false and that will braek the loop in runSlides() from continuing.
If you aren't too familiar with javascript, you should read more into
it. You will not need to know any particularly complicated concepts to
implement that 'slideshow'. Here is the Javascript they use for
reference... http://www.finewoodworking.com/js/rotation_home.js
I don't believe there is any pure CSS way to achieve this, and the
answer to your question is largely about javascript and not CSS, so you
might be better off following up any questions you might have elsewhere
as this mailing list is primarily for CSS discussion.
Best,
Rich
On 04/04/2011 06:00 PM, Michael Beaudoin wrote:
Can someone point me to a tutorial on how to create a slider/slideshow
in css like the one on the home page here:
http://www.finewoodworking.com?
I have done many in Flash but I want to get away from that and use a
non-Flash solution.
Thanks,
Michael
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
