Hi, here's the html:
<div id="slideshow">
<div class="slides">
<ul>
<li id="slide-one">
<h4>Title</h4>
<img src="images/slideshow/slide1.jpg" />
</li>
<li id="slide-two">
<h4>Title</h4>
<img src="images/slideshow/slide2.jpg" />
</li>
<li id="slide-three">
<h4>Title</h4>
<img src="images/slideshow/slide3.jpg" />
</li>
</ul>
</div>
<ul class="slides-nav">
<li class="on"><a href="#slide-one">1</a></li>
<li><a href="#slide-two">2</a></li>
<li><a href="#slide-three">3</a></li>
</ul>
</div>
***** The CSS is:
/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 555px;
background-color: #eee;
border: 1px solid #ddd;
margin-bottom: 40px;
}
#slideshow ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 1%; /* IE fix */
}
#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* slideshow > slides */
#slideshow .slides { overflow: hidden; width: 555px; }
#slideshow .slides ul { width: 1665px; }
#slideshow .slides li {
width: 515px;
float: left;
padding: 20px;
}
/* slideshow > navigation */
#slideshow .slides-nav {
background-color: #5d6f74;
border-top: 2px solid #ff3b77;
}
#slideshow .slides-nav li { float: left; }
#slideshow .slides-nav li a {
display: block;
outline: none;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a { background-color: #ff3b77; }
.js #slideshow .slides-nav li.on a { position: relative; top: -2px; }
/* END SLIDESHOW */
*** And the Javascript is:
$slideshow = {
context: false,
tabs: false,
timeout: 1000,
slideSpeed: 1000,
tabSpeed: 300,
fx: 'scrollLeft',
init: function() {
this.context = $('#slideshow');
this.tabs = $('ul.slides-nav li', this.context);
this.tabs.remove();
this.prepareSlideshow();
},
prepareSlideshow: function() {
$("div.slides > ul", $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $("ul.slides-nav", $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
var activeTab = $('a[href="#' + nextSlide.id + '"]',
$slideshow.context);
if(activeTab.length) {
$slideshow.tabs.removeClass('on');
activeTab.parent().addClass('on');
}
}
};
$(function() {
$slideshow.init();
});
$(function() {
$('body').addClass('js');
$slideshow.init();
});
Thanks for any help you may have to offer :-)
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
