Instantly share code, notes, and snippets.
Created
May 5, 2011 15:02
-
Save jonraasch/957203 to your computer and use it in GitHub Desktop.
fancy slideshow navigation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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