Created
November 15, 2010 08:54
-
-
Save gre/700181 to your computer and use it in GitHub Desktop.
HTML Slider with CSS Transitions
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>CSS Transition demo</title> | |
| <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <style> | |
| /* slide transition part */ | |
| .slide-images .slide-image, | |
| .slide-images .slide-image img { | |
| -webkit-transition-duration: 1.5s; | |
| -moz-transition-duration: 1.5s; | |
| -ms-transition-duration: 1.5s; | |
| -o-transition-duration: 1.5s; | |
| transition-duration: 1.5s; | |
| } | |
| .slide-images.myOwnTransition .slide-image { | |
| opacity: 0; | |
| } | |
| .slide-images.myOwnTransition .slide-image.current { | |
| opacity: 1; | |
| } | |
| .slide-images.myOwnTransition .slide-image img { | |
| -moz-transform: scale(2); | |
| } | |
| .slide-images.myOwnTransition .slide-image.current img { | |
| -moz-transform: scale(1); | |
| } | |
| /* | |
| .slide-images.myOwnTransition .slide-image img { | |
| -moz-transform: scale(2) rotate(180deg); | |
| } | |
| .slide-images.myOwnTransition .slide-image.current img { | |
| -moz-transform: scale(1) rotate(0); | |
| } | |
| .slide-images.myOwnTransition .slide-image img { | |
| -moz-transform: scale(2) translate(-550px, 0px); | |
| } | |
| .slide-images.myOwnTransition .slide-image.current img { | |
| -moz-transform: scale(1) translate(0, 0); | |
| } | |
| .slide-images.myOwnTransition .slide-image img { | |
| -moz-transform: matrix(-1, 0, 0, 1, 0, 250px); | |
| } | |
| .slide-images.myOwnTransition .slide-image.current img { | |
| -moz-transform: matrix(1, 0, 0, 1, 0, 0); | |
| } | |
| .slide-images.myOwnTransition .slide-image img { | |
| -moz-transform: matrix(1, 3, 0, 1, 0, 0); | |
| } | |
| .slide-images.myOwnTransition .slide-image.current img { | |
| -moz-transform: matrix(1, 0, 0, 1, 0, 0); | |
| } | |
| */ | |
| </style> | |
| </head> | |
| <body> | |
| <div id="demoSliderContainer"> | |
| <ul id="demoSlider" class="slide-images myOwnTransition"> | |
| <li class="slide-image"> | |
| <img src="monstersinc.jpg" /> | |
| <span>Monsters Inc</span> | |
| </li> | |
| <li class="slide-image"> | |
| <img src="nemo.jpg" /> | |
| <span>Nemo</span> | |
| </li> | |
| <li class="slide-image"> | |
| <img src="up.jpg" /> | |
| <span>Up</span> | |
| </li> | |
| <li class="slide-image"> | |
| <img src="walle.jpg" /> | |
| <span>Wall-E</span> | |
| </li> | |
| </ul> | |
| <div class="options"> | |
| <a href="javascript:;" class="prevSlide">prev</a> | |
| <a href="javascript:;" class="nextSlide">next</a> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var TIMEOUT_SLIDE = 4000; | |
| $('.slide-images').each(function() { | |
| var slides = $('.slide-image', this); | |
| /// Slide Navigation /// | |
| var currentSlideNum = 0; | |
| var goToSlide = function(slideNum) { | |
| slides.eq(currentSlideNum = slideNum).addClass('current').siblings().removeClass('current'); | |
| }; | |
| var nextSlide = function() { | |
| goToSlide(currentSlideNum+1>=slides.size()-1 ? 0 : currentSlideNum+1); | |
| }; | |
| var prevSlide = function() { | |
| goToSlide(currentSlideNum<1 ? slides.size()-1 : currentSlideNum-1); | |
| }; | |
| goToSlide(0); | |
| /// Navigation binding /// | |
| $('.prevSlide').click(prevSlide); | |
| $('.nextSlide').click(nextSlide); | |
| /// Auto Next Slide /// | |
| var lastHumanNav = 0; | |
| $('.prevSlide, .nextSlide, .slide-pager a').click(function(){ | |
| lastHumanNav = new Date().getTime(); | |
| }); | |
| setInterval(function() { | |
| if(new Date().getTime() - lastHumanNav > TIMEOUT_SLIDE) /* human interact is prioritary */ | |
| nextSlide(); | |
| }, TIMEOUT_SLIDE); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /* slide globals style */ | |
| .slide-images { | |
| position: relative; | |
| list-style: none; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .slide-images .slide-image { | |
| position: absolute; | |
| } | |
| .slide-images .slide-image.current img { | |
| z-index: 12; | |
| } | |
| .slide-images .slide-image.current span { | |
| z-index: 13; | |
| } | |
| .slide-images .slide-image img { | |
| z-index: 2; | |
| } | |
| .slide-images .slide-image span { | |
| position: absolute; | |
| right: 0; | |
| bottom: 4px; | |
| padding: 5px 10px; | |
| color: rgba(255,255,255,0.8); | |
| font-weight: bold; | |
| font-size: 14px; | |
| background-color: rgba(0,0,0,0.3); | |
| -moz-border-radius: 5px 0 0 0; | |
| -webkit-border-radius: 5px 0 0 0; | |
| z-index: 3; | |
| } | |
| /* demo specific styles */ | |
| #demoSliderContainer .options { | |
| padding: 3px 10px; | |
| text-align: center; | |
| min-height: 15px; | |
| } | |
| #demoSliderContainer .options a { | |
| text-decoration: none; | |
| font-weight: bold; | |
| font-size: 12px; | |
| font-family: Georgia,Serif; | |
| color: #91BECC; | |
| } | |
| #demoSliderContainer .options a:hover { | |
| color: #D3E5EB; | |
| } | |
| #demoSliderContainer .slide-pager a { | |
| -moz-transition-duration: 0.5s; | |
| -webkit-transition-duration: 0.5s; | |
| -o-transition-duration: 0.5s; | |
| } | |
| #demoSliderContainer .slide-pager a.current { | |
| background-color: #91BECC; | |
| color: black; | |
| padding: 0 4px; | |
| -moz-border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| } | |
| #demoSliderContainer .options .prevSlide { | |
| float: left; | |
| } | |
| #demoSliderContainer .options .nextSlide { | |
| float: right; | |
| } | |
| #demoSliderContainer { | |
| margin: 5px auto; | |
| padding: 0; | |
| background: black; | |
| overflow: auto; | |
| -moz-box-shadow: 1px 1px 5px black; | |
| -webkit-box-shadow: 1px 1px 5px black; | |
| width: 560px; | |
| } | |
| #demoSlider { | |
| margin: 0 auto; | |
| padding: 0; | |
| border: 5px solid black; | |
| border-bottom: 0; | |
| height: 220px; | |
| width: 550px; | |
| } |
Author
gre
commented
Apr 26, 2012
via email
It means only animations aren't working on older IE.
Slides are still changeable but without transition effect which is IMO ok
for a slow browser like IE6 is.
Le 26 avr. 2012 18:01, "rohitjindal" <
[email protected]>
a écrit :
… Is it mean script on Sliderjs.org will not work in previous version than
IE10 ?
---
Reply to this email directly or view it on GitHub:
https://gist.github.com/700181
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment