Skip to content

Instantly share code, notes, and snippets.

@jonraasch

jonraasch/fancy-slideshow-navigation.html

Created May 5, 2011 15:02
Show Gist options
  • Save jonraasch/957203 to your computer and use it in GitHub Desktop.
Save jonraasch/957203 to your computer and use it in GitHub Desktop.
Download ZIP
fancy slideshow navigation
Raw
fancy-slideshow-navigation.html
<!doctype html>
<html lang="en">
<head>
<title>Fancy Slideshow Navigation (example)</title>
<style type="text/css">
#slideshow {
width: 900px;
height: 500px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#slideshow-reel {
width: 5400px;
height: 450px;
position: absolute;
top: 0;
left: 0;
}
#slideshow-reel .slide {
width: 900px;
height: 450px;
float: left;
background-color: gray;
}
#slideshow-reel .slide:nth-child(2n+1) {
background-color: #333;
}
#slideshow-reel h1 {
margin: 25px 60px;
color: #FFF;
font-size: 3em;
text-shadow: 0 -1px 1px #333;
}
/* arrow navigation */
.slideshow-arrow {
display: block;
position: absolute;
top: 190px;
width: 0;
height: 0;
border-style: solid;
border-width: 28px 21px;
border-color: transparent;
outline: none;
}
.slideshow-arrow:hover {
opacity: .5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#slideshow-left {
left: 0;
border-right-color: #fff;
}
#slideshow-right {
right: 0;
border-left-color: #fff;
}
/* bottom navigation */
#slideshow-nav {
position: absolute;
left: 0;
bottom: 0;
width: 900px;
}
#slideshow-nav .nav-item {
float: left;
width: 150px;
padding: 11px 0;
outline: none;
}
#slideshow-nav .nav-item-line {
float: left;
width: 68px;
height: 1px;
line-height: 1px;
margin: 3px 0;
background-color: #bbb;
}
#slideshow-nav .nav-item-line-hidden {
background-color: transparent;
}
#slideshow-nav .nav-item-dot {
float: left;
width: 8px;
height: 8px;
margin: 0 3px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #ed1d27;
}
/* active nav dot */
#active-nav-item {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
margin-left: 60px;
background-color: #8e8d8b;
background-color: rgba(28, 27, 23, .5);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#active-nav-item .active-nav-item-inner {
display: inline-block;
width: 8px;
height: 8px;
margin: 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #000;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.slideshow-arrow,
#slideshow-nav .nav-item-line,
#slideshow-nav .nav-item-dot {
overflow: hidden;
}
.slideshow-arrow,
.slideshow-arrow:hover {
border-top-color: pink;
border-bottom-color: pink;
filter: chroma(color=pink);
}
#slideshow-left {
border-left-color: pink;
}
#slideshow-right {
border-right-color: pink;
}
</style>
<![endif]-->
</head>
<body>
<div id="slideshow">
<div id="slideshow-reel">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div class="slide">
<h1>Slide 5</h1>
</div>
<div class="slide">
<h1>Slide 6</h1>
</div>
</div>
<a href="#" id="slideshow-left" class="slideshow-arrow"></a>
<a href="#" id="slideshow-right" class="slideshow-arrow"></a>
<div id="slideshow-nav">
<a href="#" class="nav-item">
<span class="nav-item-line nav-item-line-hidden"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line"></span>
</a>
<a href="#" class="nav-item">
<span class="nav-item-line"></span>
<span class="nav-item-dot"></span>
<span class="nav-item-line nav-item-line-hidden"></span>
</a>
<span id="active-nav-item">
<span class="active-nav-item-inner"></span>
</span>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript">
$(function() {
function changeSlide( newSlide ) {
// cancel any timeout
clearTimeout( slideTimeout );
// change the currSlide value
currSlide = newSlide;
// make sure the currSlide value is not too low or high
if ( currSlide > maxSlide ) currSlide = 0;
else if ( currSlide < 0 ) currSlide = maxSlide;
// animate the slide reel
$slideReel.animate({
left : currSlide * -900
}, 400, 'swing', function() {
// hide / show the arrows depending on which frame it's on
if ( currSlide == 0 ) $slideLeftNav.hide();
else $slideLeftNav.show();
if ( currSlide == maxSlide ) $slideRightNav.hide();
else $slideRightNav.show();
// set new timeout if active
if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
});
// animate the navigation indicator
$activeNavItem.animate({
left : currSlide * 150
}, 400, 'swing');
}
function nextSlide() {
changeSlide( currSlide + 1 );
}
// define some variables / DOM references
var activeSlideshow = true,
currSlide = 0,
slideTimeout,
$slideshow = $('#slideshow'),
$slideReel = $slideshow.find('#slideshow-reel'),
maxSlide = $slideReel.children().length - 1,
$slideLeftNav = $slideshow.find('#slideshow-left'),
$slideRightNav = $slideshow.find('#slideshow-right'),
$activeNavItem = $slideshow.find('#active-nav-item');
// set navigation click events
// left arrow
$slideLeftNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide - 1 );
});
// right arrow
$slideRightNav.click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( currSlide + 1 );
});
// main navigation
$slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
ev.preventDefault();
activeSlideshow = false;
changeSlide( $(this).index() );
});
// start the animation
slideTimeout = setTimeout(nextSlide, 1200);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment