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
Author
CSS Transitions can't work on IE7. (the slider should still fallback without animation btw)
And it seems it is only supported since IE10
according to http://caniuse.com/css-transitions
Author
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
which version of IE?