Monday, 1 May 2017

AUTO CSS 3D CAROUSEL

AUTO CSS 3D CAROUSEL


--------------------------------------------------------------------------------------------------------------
ReadMore:
http://www.cssplay.co.uk/menu/css3-3d-carousel.html
http://codepen.io/chriscoyier/pen/EyxPPm
http://fbgadgets.blogspot.co.uk/2017/02/auto-css-js-slider-with-arrow-bullet.html
http://slippry.com/examples/css-vs-jquery/
Infinite Scroll Carousel using CSS3 Animation
FIND IN GOOGLE
animation: moveSlideshow 15s linear infinite;
http://stackoverflow.com/questions/43360520/infinite-scroll-carousel-using-css3-animation
https://jsfiddle.net/benjaminthomas/rstyr1nm/



RADIO BUTTON CSS SLIDER TO KEY FRAME SLIDER HD
May 10, 2017 1:54 PM
Edit

--------------------------------------------------------------------------------------------------------------
AUTO CSS  3D CAROUSEL CODE:
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) Stu Nicholls - CSS play. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.carousel {width:750px; margin:100px auto;
-webkit-perspective: 1600px;
-webkit-perspective-origin: 50% -500px;
}
.ring {position:relative; margin:0 0 0 440px; height:120px; width:180px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
-webkit-animation-name: rotateMe;
}
.spoke {position:absolute; height:120px; width:180px;}
.ring img {border:5px solid #fff;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0,0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
}
.ring img {display:block; width:180px; height:120px;}
.ring .p1 {-webkit-animation-name: enlargeMe12;}
.ring .p2 {-webkit-animation-name: enlargeMe11;}
.ring .p3 {-webkit-animation-name: enlargeMe10;}
.ring .p4 {-webkit-animation-name: enlargeMe9;}
.ring .p5 {-webkit-animation-name: enlargeMe8;}
.ring .p6 {-webkit-animation-name: enlargeMe7;}
.ring .p7 {-webkit-animation-name: enlargeMe6;}
.ring .p8 {-webkit-animation-name: enlargeMe5;}
.ring .p9 {-webkit-animation-name: enlargeMe4;}
.ring .p10 {-webkit-animation-name: enlargeMe3;}
.ring .p11 {-webkit-animation-name: enlargeMe2;}
.ring .p12 {-webkit-animation-name: enlargeMe1;}
@-webkit-keyframes rotateMe {
0% { -webkit-transform: rotateY(0deg);}
8.33% { -webkit-transform: rotateY(30deg);}
16.66% { -webkit-transform: rotateY(60deg);}
24.99% { -webkit-transform: rotateY(90deg);}
33.33% { -webkit-transform: rotateY(120deg);}
41.66% { -webkit-transform: rotateY(150deg);}
49.99% { -webkit-transform: rotateY(180deg);}
58.33% { -webkit-transform: rotateY(210deg);}
66.66% { -webkit-transform: rotateY(240deg);}
74.99% { -webkit-transform: rotateY(270deg);}
83.33% { -webkit-transform: rotateY(300deg);}
91.66% { -webkit-transform: rotateY(330deg);}
100% { -webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes enlargeMe1 {
0% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-webkit-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe2 {
0% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -webkit-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe3 {
0% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-webkit-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe4 {
0% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-webkit-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe5 {
0% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-webkit-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe6 {
0% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-webkit-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe7 {
0% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-webkit-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe8 {
0% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-webkit-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe9 {
0% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-webkit-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe10 {
0% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-webkit-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe11 {
0% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-webkit-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe12 {
0% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}
/* for Firefox */
.carousel {
-moz-perspective: 1600px;
-moz-perspective-origin: 50% -500px;
}
.ring {
-moz-transform-style: preserve-3d;
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
-moz-animation-name: rotateMe;
}
.ring img {
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
}
.ring .p1 {-moz-animation-name: enlargeMe12;}
.ring .p2 {-moz-animation-name: enlargeMe11;}
.ring .p3 {-moz-animation-name: enlargeMe10;}
.ring .p4 {-moz-animation-name: enlargeMe9;}
.ring .p5 {-moz-animation-name: enlargeMe8;}
.ring .p6 {-moz-animation-name: enlargeMe7;}
.ring .p7 {-moz-animation-name: enlargeMe6;}
.ring .p8 {-moz-animation-name: enlargeMe5;}
.ring .p9 {-moz-animation-name: enlargeMe4;}
.ring .p10 {-moz-animation-name: enlargeMe3;}
.ring .p11 {-moz-animation-name: enlargeMe2;}
.ring .p12 {-moz-animation-name: enlargeMe1;}
@-moz-keyframes rotateMe {
0% { -moz-transform: rotateY(0deg);}
8.33% { -moz-transform: rotateY(30deg);}
16.66% { -moz-transform: rotateY(60deg);}
24.99% { -moz-transform: rotateY(90deg);}
33.33% { -moz-transform: rotateY(120deg);}
41.66% { -moz-transform: rotateY(150deg);}
49.99% { -moz-transform: rotateY(180deg);}
58.33% { -moz-transform: rotateY(210deg);}
66.66% { -moz-transform: rotateY(240deg);}
74.99% { -moz-transform: rotateY(270deg);}
83.33% { -moz-transform: rotateY(300deg);}
91.66% { -moz-transform: rotateY(330deg);}
100% { -moz-transform: rotateY(360deg);}
}
@-moz-keyframes enlargeMe1 {
0% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-moz-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe2 {
0% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -moz-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe3 {
0% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-moz-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe4 {
0% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-moz-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe5 {
0% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-moz-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe6 {
0% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-moz-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe7 {
0% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-moz-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe8 {
0% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-moz-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe9 {
0% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-moz-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe10 {
0% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-moz-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe11 {
0% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-moz-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe12 {
0% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}
</style>
<style>
@media only screen and (max-width:480px) {
.carousel {display:none;}
#info h3.smartphone {display:block;}
}
</style>
</head>
<body>
<div class="carousel">
<div class="ring">
<img class="spoke p1" src="http://www.cssplay.co.uk/menu/css-carousel/pic_1h.jpg" alt="" />
<img class="spoke p2" src="http://www.cssplay.co.uk/menu/css-carousel/pic_2h.jpg" alt="" />
<img class="spoke p3" src="http://www.cssplay.co.uk/menu/css-carousel/pic_3h.jpg" alt="" />
<img class="spoke p4" src="http://www.cssplay.co.uk/menu/css-carousel/pic_4h.jpg" alt="" />
<img class="spoke p5" src="http://www.cssplay.co.uk/menu/css-carousel/pic_5h.jpg" alt="" />
<img class="spoke p6" src="http://www.cssplay.co.uk/menu/css-carousel/pic_6h.jpg" alt="" />
<img class="spoke p7" src="http://www.cssplay.co.uk/menu/css-carousel/pic_7h.jpg" alt="" />
<img class="spoke p8" src="http://www.cssplay.co.uk/menu/css-carousel/pic_8h.jpg" alt="" />
<img class="spoke p9" src="http://www.cssplay.co.uk/menu/css-carousel/pic_9h.jpg" alt="" />
<img class="spoke p10" src="http://www.cssplay.co.uk/menu/css-carousel/pic_10h.jpg" alt="" />
<img class="spoke p11" src="http://www.cssplay.co.uk/menu/css-carousel/pic_11h.jpg" alt="" />
<img class="spoke p12" src="http://www.cssplay.co.uk/menu/css-carousel/pic_12h.jpg" alt="" />
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
FIND IN GOOGLE
animation: moveSlideshow 15s linear infinite;
http://stackoverflow.com/questions/43360520/infinite-scroll-carousel-using-css3-animation
https://jsfiddle.net/benjaminthomas/rstyr1nm/
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.caurosel-wrapper{
overflow:hidden;
position:relative;
width:auto;
max-width: 1440px;
margin: 0 auto 30px;
}
.caurosel-list{
width: 2112px;
list-style-type: none;
white-space: nowrap;
font-size: 0;
animation: moveSlideshow 15s linear infinite;
}
li{
display: inline-block;
background-color: gray;
width: 160px;
height: 160px;
margin: 0 8px;
}
li.first{
-webkit-animation: moveSlideshow 30s linear infinite;
-moz-animation: moveSlideshow 30s linear infinite;
-ms-animation: moveSlideshow 30s linear infinite;
-o-animation: moveSlideshow 30s linear infinite;
animation: moveSlideshow 30s linear infinite;
}
h3{
font-size: 30px;
color: #fff;
}

@keyframes moveSlideshow {
0%{
margin-left: 0;
}
100% {
margin-left: -538px; 
}
}
</style>
<title> by benjaminthomas</title>

</head>
<body>
<div class="caurosel-wrapper">
<ul class="caurosel-list">
<li class="first"><h3>1</h3></li>
<li><h3>2</h3></li>
<li><h3>3</h3></li>
<li><h3>4</h3></li>
<li><h3>5</h3></li>
<li><h3>6</h3></li>
<li><h3>7</h3></li>
<li><h3>8</h3></li>
<li><h3>9</h3></li>
<li><h3>10</h3></li>
<li><h3>11</h3></li>
<li><h3>12</h3></li>
</ul>
</div>

</body>
</html>

------------------------------------------------------------------------------------------------------------------
VERTICAL CSS3 CAROUSEL
http://jsfiddle.net/spliter/g2PE7
------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/spliter/g2PE7/ -->
<!-- IN THIS SLIDER USE 3 IMAGES WHICH WIDTH 333px AND HEIGHT 500px  -->
<head>
<style type="text/css">
body {
padding: 1em;
background: #999
}
.scrollable {
height: 500px;
width: 333px;
margin: 0 auto;
padding: 0;
border:10px solid #fff;
background: #000;
position: relative;
overflow: hidden;
text-align: center;
}
img {
max-height: 500px;
margin: 0 auto;
display: block;
}
.items {
-webkit-animation: scroll 12s infinite;
-moz-animation: scroll 12s infinite;
-ms-animation: scroll 12s infinite;
}
@-webkit-keyframes scroll {
0%   { margin-top: 0; }
27.33%  { margin-top: 0 }
33.33%  { margin-top: -500px; }
60.66% { margin-top: -500px; }
66.66% { margin-top: -1000px; }
94.99% { margin-top: -1000px; }
100%  { margin-top: 0 }
}
@-moz-keyframes scroll {
0%   { margin-top: 0; }
27.33%  { margin-top: 0 }
33.33%  { margin-top: -500px; }
60.66% { margin-top: -500px; }
66.66% { margin-top: -1000px; }
94.99% { margin-top: -1000px; }
100%  { margin-top: 0 }
}
@-ms-keyframes scroll {
0%   { margin-top: 0; }
27.33%  { margin-top: 0 }
33.33%  { margin-top: -500px; }
60.66% { margin-top: -500px; }
66.66% { margin-top: -1000px; }
94.99% { margin-top: -1000px; }
100%  { margin-top: 0 }
}
</style>
<title>Vertical CSS3 carousel by spliter</title>
</head>
<body>
<div class="scrollable">
<div class="items">
<img src="http://farm8.staticflickr.com/7020/6767599565_e0ffee2813_d.jpg" alt="" />
<img src="http://farm8.staticflickr.com/7016/6767598507_21720ed21f_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
<img src="http://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
</div>
</div>
</body>
</html>



------------------------------------------------------------------------------------------------------------------
HORIZONTAL CSS3 CAROUSEL
http://jsfiddle.net/spliter/Syd3y/
------------------------------------------------------------------------------------------------------------------
<html>
<!-- http://jsfiddle.net/spliter/g2PE7/ -->
<!-- IN THIS SLIDER USE 3 IMAGES WHICH WIDTH 333px AND HEIGHT 500px  -->
<head>
<style type="text/css">
body {
padding: 1em;
background: #999
}
.scrollable {
width: 333px;
margin: 0 auto;
padding: 0;
border:10px solid #fff;
background: #000;
position: relative;
overflow: hidden;
text-align: center;
}
img {
max-width: 333px;
margin: 0;
float:left;
}
.items {
width:999px;
-webkit-animation: hscroll 12s infinite;
-moz-animation: hscroll 12s infinite;
-ms-animation: hscroll 12s infinite;
}
@-webkit-keyframes hscroll {
0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100%  { margin-left: 0 }
}
@-moz-keyframes hscroll {
0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100%  { margin-left: 0 }
}
@-ms-keyframes hscroll {
0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100%  { margin-left: 0 }
}
</style>
<title>Vertical CSS3 carousel by spliter</title>
</head>
<body>
<div class="scrollable">
<div class="items">
<img src="http://farm8.staticflickr.com/7020/6767599565_e0ffee2813_d.jpg" alt="" />
<img src="http://farm8.staticflickr.com/7016/6767598507_21720ed21f_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
<img src="http://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
</div>
</div>
</body>
</html>

 ---------------------------------------------------------------------------------------------------------------







Posted by on Monday, 1 May 2017 at 13:24
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets