Skip to content

Instantly share code, notes, and snippets.

@gre

gre/index.html

Created November 15, 2010 08:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gre/700181 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gre/700181 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Slider with CSS Transitions
Raw
index.html
<!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>
Raw
main.css
/* 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;
}
@gre
Copy link
Author

gre commented Apr 26, 2012

You need to adapt css property with -ms- prefix, and try also to add without prefix.

like here:

  .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;
  }

@gre
Copy link
Author

gre commented Apr 26, 2012

which version of IE?

@gre
Copy link
Author

gre commented Apr 26, 2012

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

@gre
Copy link
Author

gre commented Apr 26, 2012 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment