Find file
Fetching contributors…
Cannot retrieve contributors at this time
94 lines (79 sloc) 1.91 KB
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="build/build.css">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<style>
.carousel {
position: relative;
margin-bottom: 18px;
line-height: 1;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-ms-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
-webkit-transform: translate3d(0,0,0);
}
.carousel .item > img {
display: block;
line-height: 1;
margin-left: auto;
margin-right: auto;
}
.carousel .active,
.carousel .next,
.carousel .prev {
display: block;
}
.carousel .active {
left: 0;
}
.carousel .next,
.carousel .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel .next {
left: 100%;
}
.carousel .prev {
left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
left: 0;
}
.carousel .active.left {
left: -100%;
}
.carousel .active.right {
left: 100%;
}
</style>
</head>
<body>
<div class='carousel'>
<div class='carousel-inner'>
<div class='item' ><img src='http://www.digitaljournal.com/img/5/9/2/8/1/2/i/1/2/6/o/tard-Cat.jpg'></div>
<div class='item' ><img src='http://cdn.inquisitr.com/wp-content/2012/09/Grumpy-Cat-Tadar-Sauce.jpg'></div>
<div class='item' ><img src='http://newmediarockstars.com/wp-content/uploads/2012/10/GrumpyCat008.jpeg'></div>
<div class='item' ><img src='http://ksaz.images.worldnow.com/images/19768980_BG1.jpg'></div>
</div>
</div>
<script src="build/build.js"></script>
<script>
var swap = require('swap-elements');
window.tester = swap('.item', {startIndex: 2});
</script>
</body>