Слайдер является прекрасным инструментом для показа и ротации изображений на сайте. Он представляет собой небольшой блок, как правило вверху страницы или в сайдбаре, где с помощью меняющихся картинок посетителя знакомят с интересными материалами на сайте. Смена картинок может сопровождаться текстом. Также у слайдера может присутствовать навигация в виде управляющих стрелок, маркеров или превьюшек. Размер слайдера также может варьироваться от совсем маленького до полноэкранного.
Существует множество видов и типов слайдеров. Самым распространённым является использование JavaScript и различных библиотек. Но с современным развитием CSS, появилась возможность отказаться от использования скриптов и создавать слайдеры с использованием только таблиц стилей. Такие слайдеры имеют множество преимуществ, например: простота настройки, простота встраивания в с сайт, лёгкость и разнообразие эффектов. Правда, не все устаревшие браузеры поддерживают данную возможность, но таких осталось не много. Здесь собраны самые интересные и простые слайдеры с использованием только CSS.
1.Интересный слайдер с эффектом зумирования и описанием изображений.
HTML
<!-- Start cssSlider.com --> <div class='csslider1 autoplay '> <input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' > <input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' > <input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' > <input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked> <input name="cs_anchor1" id='cs_pause1' type="radio" class='cs_anchor' > <ul> <div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;"> <img src="http://cssslider.com/sliders/pen/images/buns.jpg" style="width: 100%;"> </div> <li class='num0 img'> <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Buns' title='Buns' /> </a> </li> <li class='num1 img'> <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Croissant' title='Croissant' /> </a> </li> <li class='num2 img'> <a href="http://cssslider.com" target=""><img src='http://cssslider.com/sliders/pen/images/buns.jpg' alt='Lemon pie' title='Lemon pie' /> </a> </li> </ul> <div class='cs_description'> <label class='num0'> <span class="cs_title"><span class="cs_wrapper">Buns</span></span> </label> <label class='num1'> <span class="cs_title"><span class="cs_wrapper">Croissant</span></span> </label> <label class='num2'> <span class="cs_title"><span class="cs_wrapper">Lemon pie</span></span> </label> </div> <div class='cs_arrowprev'> <label class='num0' for='cs_slide1_0'></label> <label class='num1' for='cs_slide1_1'></label> <label class='num2' for='cs_slide1_2'></label> </div> <div class='cs_arrownext'> <label class='num0' for='cs_slide1_0'></label> <label class='num1' for='cs_slide1_1'></label> <label class='num2' for='cs_slide1_2'></label> </div> <div class='cs_bullets'> <label class='num0' for='cs_slide1_0'> <span class='cs_point'></span> <span class='cs_thumb'><img src='http://cssslider.com/sliders/pen/tooltips/buns.jpg' alt='Buns' title='Buns' /></span> </label> <label class='num1' for='cs_slide1_1'> <span class='cs_point'></span> <span class='cs_thumb'><img src='http://cssslider.com/sliders/pen/tooltips/croissant.jpg' alt='Croissant' title='Croissant' /></span> </label> <label class='num2' for='cs_slide1_2'> <span class='cs_point'></span> <span class='cs_thumb'><img src='http://cssslider.com/sliders/pen/tooltips/lemonpie.jpg' alt='Lemon pie' title='Lemon pie' /></span> </label> </div> </div> <!-- End cssSlider.com -->
CSS
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese);
@font-face {
font-family: "demurecontrols";
src: url("http://cssslider.com/sliders/pen/demurecontrols.eot?cssslidertheme=demure");
src: url("http://cssslider.com/sliders/pen/demurecontrols.eot#iefix?cssslidertheme=demure") format("embedded-opentype"),
url("http://cssslider.com/sliders/pen/demurecontrols.woff?cssslidertheme=demure") format("woff"),
url("http://cssslider.com/sliders/pen/demurecontrols.ttf?cssslidertheme=demure") format("truetype"),
url("http://cssslider.com/sliders/pen/demurecontrols.svg#demure?cssslidertheme=demure") format("svg");
font-weight: normal;
font-style: normal;
}
.text-1 {
font-family:Roboto;
}
.text-1 a{
color: #000000;
text-decoration: none;
}
.csslider1 {
display: inline-block;
position: relative;
max-width: 480px;
width: 100%;
margin-top: 10px;
}
.csslider1 > .cs_anchor {
display: none;
}
.csslider1 > ul {
position: relative;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.csslider1 > ul > li.img img {
width: 100%;
}
.csslider1 > ul > li.img {
font-size: 0pt;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
.csslider1 > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
white-space: normal;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.csslider1 .cs_lnk{
position: absolute;
top: -9999px;
left: -9999px;
font-size: 0pt;
opacity: 0;
filter: alpha(opacity=0);
}.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext {
position: absolute;
top: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 5;
}
.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
position: absolute;
text-decoration: none;
cursor: pointer;
opacity: 0;
z-index: -1;
}
.csslider1 > .cs_arrowprev {
left: 0;
}
.csslider1 > .cs_arrownext {
right: 0;
}
.csslider1 > .cs_arrowprev > label.num2,
.csslider1 > .cs_arrownext > label.num1 {
opacity: 1;
z-index: 5;
}
.csslider1 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label {
opacity: 0;
z-index: -1;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0 {
opacity: 1;
z-index: 5;
}
/* calculate autoplay */
@-webkit-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-moz-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-ms-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@-o-keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
@keyframes arrow {
0%, 33.32333333333334% { opacity: 1; z-index: 5; }
33.333333333333336%, 100% { opacity: 0; z-index: -1; }
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num1 {
-webkit-animation: arrow 24000ms infinite -2000ms;
-moz-animation: arrow 24000ms infinite -2000ms;
-ms-animation: arrow 24000ms infinite -2000ms;
-o-animation: arrow 24000ms infinite -2000ms;
animation: arrow 24000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num2 {
-webkit-animation: arrow 24000ms infinite 6000ms;
-moz-animation: arrow 24000ms infinite 6000ms;
-ms-animation: arrow 24000ms infinite 6000ms;
-o-animation: arrow 24000ms infinite 6000ms;
animation: arrow 24000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label.num0 {
-webkit-animation: arrow 24000ms infinite 14000ms;
-moz-animation: arrow 24000ms infinite 14000ms;
-ms-animation: arrow 24000ms infinite 14000ms;
-o-animation: arrow 24000ms infinite 14000ms;
animation: arrow 24000ms infinite 14000ms;
}
.csslider1.cs_pauseHover:hover > .cs_arrowprev > label,
.csslider1 > #cs_pause1:checked ~ .cs_arrowprev > label,
.csslider1.cs_pauseHover:hover > .cs_arrownext > label,
.csslider1 > #cs_pause1:checked ~ .cs_arrownext > label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 > .cs_bullets {
position: absolute;
left: 0;
width: 100%;
z-index: 6;
font-size: 0;
line-height: 8pt;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider1 > .cs_bullets > div {
margin-left: -50%;
width: 100%;
}
.csslider1 > .cs_bullets > label {
position: relative;
display: inline-block;
cursor: pointer;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
visibility: hidden;
position: absolute;
opacity: 0;
z-index: 1;
line-height: 0;
left: -44px;
top: -48px;
}.csslider1 > .cs_description {
z-index: 3;
}
.csslider1 > .cs_description a,
.csslider1 > .cs_description a:visited,
.csslider1 > .cs_description a:active {
color: inherit;
}
.csslider1 > .cs_description a:hover {
text-decoration: none;
}
.csslider1 > .cs_description > label {
position: absolute;
word-wrap: break-word;
white-space: normal;
text-align: left;
max-width: 50%;
left: 0;
}
.csslider1 > .cs_description > label > span {
vertical-align: top;
}
.csslider1 > .cs_description > label span {
display: inline-block;
}
.csslider1 > ul > li {
position: absolute;
left: 0;
top: 0;
display: inline-block;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease, -webkit-transform 24000ms linear;
-moz-transition: opacity 2000ms ease, -moz-transform 24000ms linear;
-ms-transition: opacity 2000ms ease, -ms-transform 24000ms linear;
-o-transition: opacity 2000ms ease, -o-transform 24000ms linear;
transition: opacity 2000ms ease, transform 24000ms linear;
}
.csslider1 > ul > li.num0 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, 11.53846%);
transform: scale(1.3) translate(-11.53846%, 11.53846%);
}
.csslider1 > ul > li.num1 {
opacity: 0;
-webkit-transform: scale(1.3) translate(11.53846%, 11.53846%);
-moz-transform: scale(1.3) translate(11.53846%, 11.53846%);
-ms-transform: scale(1.3) translate(11.53846%, 11.53846%);
-o-transform: scale(1.3) translate(11.53846%, 11.53846%);
transform: scale(1.3) translate(11.53846%, 11.53846%);
}
.csslider1 > ul > li.num2 {
opacity: 0;
-webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-moz-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-ms-transform: scale(1.3) translate(-11.53846%, -11.53846%);
-o-transform: scale(1.3) translate(-11.53846%, -11.53846%);
transform: scale(1.3) translate(-11.53846%, -11.53846%);
}
.csslider1 > ul > li.num0 {
opacity: 1;
z-index: 2;
}
.csslider1 > .slide:checked ~ ul > li.num0 {
opacity: 0;
z-index: 1;
}
.csslider1 > #cs_slide1_0:checked ~ ul > li.num0,.csslider1 > #cs_slide1_1:checked ~ ul > li.num1,.csslider1 > #cs_slide1_2:checked ~ ul > li.num2 {
opacity: 1;
-webkit-transform: scale(1) translate(0, 0);
-moz-transform: scale(1) translate(0, 0);
-ms-transform: scale(1) translate(0, 0);
-o-transform: scale(1) translate(0, 0);
transform: scale(1) translate(0, 0);
z-index: 2;
}
/* calculate autoplay */
@-webkit-keyframes kenbernsBR {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsBR {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsBR {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsBR {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsBR {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsBL {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsBL {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsBL {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsBL {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsBL {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsTL {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsTL {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsTL {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsTL {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTL {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, -11.53846%); opacity: 0; z-index: 2; }
}
@-webkit-keyframes kenbernsTR {
0%, 100% { -webkit-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -webkit-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-moz-keyframes kenbernsTR {
0%, 100% { -moz-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -moz-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-ms-keyframes kenbernsTR {
0%, 100% { -ms-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -ms-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@-o-keyframes kenbernsTR {
0%, 100% { -o-transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { -o-transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
@keyframes kenbernsTR {
0%, 100% { transform: scale(1); opacity: 0 }
8.333333333333334%, 33.333333333333336% { opacity: 1 }
41.66666666666667%, 66.66666666666666% { transform: scale(1.3) translate(-11.53846%, 11.53846%); opacity: 0; z-index: 2; }
}
.csslider1 > #cs_play1:checked ~ ul > li.num0,
.csslider1 > #cs_pause1:checked ~ ul > li.num0 {
-webkit-animation: kenbernsTR 24000ms infinite -2000ms linear;
-moz-animation: kenbernsTR 24000ms infinite -2000ms linear;
-ms-animation: kenbernsTR 24000ms infinite -2000ms linear;
-o-animation: kenbernsTR 24000ms infinite -2000ms linear;
animation: kenbernsTR 24000ms infinite -2000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li.num1,
.csslider1 > #cs_pause1:checked ~ ul > li.num1 {
-webkit-animation: kenbernsBR 24000ms infinite 6000ms linear;
-moz-animation: kenbernsBR 24000ms infinite 6000ms linear;
-ms-animation: kenbernsBR 24000ms infinite 6000ms linear;
-o-animation: kenbernsBR 24000ms infinite 6000ms linear;
animation: kenbernsBR 24000ms infinite 6000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li.num2,
.csslider1 > #cs_pause1:checked ~ ul > li.num2 {
-webkit-animation: kenbernsTL 24000ms infinite 14000ms linear;
-moz-animation: kenbernsTL 24000ms infinite 14000ms linear;
-ms-animation: kenbernsTL 24000ms infinite 14000ms linear;
-o-animation: kenbernsTL 24000ms infinite 14000ms linear;
animation: kenbernsTL 24000ms infinite 14000ms linear;
}
.csslider1 > #cs_play1:checked ~ ul > li,
.csslider1 > #cs_pause1:checked ~ ul > li {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > ul > li,
.csslider1 > #cs_pause1:checked ~ ul > li{
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ ul > li {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_play_pause {
-webkit-transition: .5s opacity 0s ease;
-moz-transition: .5s opacity 0s ease;
-ms-transition: .5s opacity 0s ease;
-o-transition: .5s opacity 0s ease;
transition: .5s opacity 0s ease;
}
.csslider1 > .cs_arrowprev {
-webkit-transition: .5s opacity .15s ease, .5s -webkit-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: .5s opacity .15s ease, .5s -moz-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: .5s opacity .15s ease, .5s -ms-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: .5s opacity .15s ease, .5s -o-transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: .5s opacity .15s ease, .5s transform .15s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.csslider1 > .cs_arrownext {
-webkit-transition: .5s opacity .3s ease, .5s -webkit-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: .5s opacity .3s ease, .5s -moz-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: .5s opacity .3s ease, .5s -ms-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: .5s opacity .3s ease, .5s -o-transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: .5s opacity .3s ease, .5s transform .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext,
.csslider1 > .cs_play_pause {
opacity: 0;
}
.csslider1:hover > .cs_arrowprev,
.csslider1:hover > .cs_arrownext,
.csslider1:hover > .cs_play_pause {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
overflow: hidden;
margin-top: -35px;
width: 40px;
height: 70px;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.csslider1 > .cs_arrowprev {
left: 70px;
}
.csslider1 > .cs_arrownext {
right: 70px;
}
.csslider1 > .cs_arrowprev > label {
right: 0;
}
.csslider1 > .cs_arrownext > label {
left: 0;
}
.csslider1 > .cs_arrowprev > label:after {
content: '\e800';
}
.csslider1 > .cs_arrownext > label:after {
content: '\e801';
}
.csslider1 > .cs_arrowprev > label:after,
.csslider1 > .cs_arrownext > label:after {
display: block;
font: 40px "demurecontrols";
text-align: center;
line-height: 76px;
color: #fff;
}
.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
-webkit-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-moz-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-ms-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
-o-transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
transition: 300ms width ease, 300ms margin-left ease, 300ms background-color ease;
}
.csslider1 > .cs_arrowprev:hover > label {
background-color: #E34B64;
width: 70px;
}
.csslider1 > .cs_arrownext:hover > label {
background-color: #E34B64;
width: 70px;
}.csslider1 > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider1 > .cs_bullets > label {
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
border: 3px solid #E34B64;
margin-top: -11px;
-webkit-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -moz-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -ms-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), -o-transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), transform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275), visibility 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
-webkit-transform-origin: 0% 100% 0px;
-moz-transform-origin: 0% 100% 0px;
-ms-transform-origin: 0% 100% 0px;
-o-transform-origin: 0% 100% 0px;
transform-origin: 0% 100% 0px;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.csslider1 > .cs_bullets > label > .cs_thumb:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
margin-left: -1px;
bottom: -8px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #E34B64;
}
.csslider1 > .cs_bullets > label:hover > .cs_thumb {
visibility: visible;
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > .cs_bullets > label {
margin: 0 6px;
padding: 9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider1 > .cs_bullets > label.num0 {
background-color: #E34B64;
}
.csslider1 > .slide:checked ~ .cs_bullets > label {
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2 {
background-color: #E34B64;
}
.csslider1 > .cs_bullets > label:hover {
background-color: #E34B64;
}
/* calculate autoplay */
@-webkit-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-moz-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-ms-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@-o-keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
@keyframes bullet {
0%, 33.32333333333334% { background-color: #E34B64; }
33.333333333333336%, 100% { background: #000; background-color: rgba(0,0,0,0.6); }
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num0 {
-webkit-animation: bullet 24000ms infinite -2000ms;
-moz-animation: bullet 24000ms infinite -2000ms;
-ms-animation: bullet 24000ms infinite -2000ms;
-o-animation: bullet 24000ms infinite -2000ms;
animation: bullet 24000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num1 {
-webkit-animation: bullet 24000ms infinite 6000ms;
-moz-animation: bullet 24000ms infinite 6000ms;
-ms-animation: bullet 24000ms infinite 6000ms;
-o-animation: bullet 24000ms infinite 6000ms;
animation: bullet 24000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label.num2 {
-webkit-animation: bullet 24000ms infinite 14000ms;
-moz-animation: bullet 24000ms infinite 14000ms;
-ms-animation: bullet 24000ms infinite 14000ms;
-o-animation: bullet 24000ms infinite 14000ms;
animation: bullet 24000ms infinite 14000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > .cs_bullets > label,
.csslider1 > #cs_pause1:checked ~ .cs_bullets > label {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_bullets > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1 > .cs_description > label {
font: 20px 'Roboto', sans-serif;
line-height: normal;
bottom: 35px;
left: 20px;
top: auto;
opacity: 1;
z-index: 1;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
}
.csslider1 > .cs_description > label > span {
margin: 1px 10px;
padding: 10px;
color: #fff;
overflow: hidden;
-webkit-transform-origin: 0% 0% 0px;
-moz-transform-origin: 0% 0% 0px;
-ms-transform-origin: 0% 0% 0px;
-o-transform-origin: 0% 0% 0px;
transform-origin: 0% 0% 0px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 {
z-index: 2;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_descr {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1350ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 > .cs_title {
opacity: 1;
visibility: visible;
-webkit-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-moz-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-ms-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-o-transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
transition: 750ms opacity 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1200ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 1200ms ease;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0 .cs_wrapper,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1 .cs_wrapper,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2 .cs_wrapper {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.csslider1 > .cs_description > label > .cs_title {
margin: 0px 10px;
opacity: 0;
visibility: hidden;
z-index: 2;
/* Fallback for web browsers that doesn't support RGBa */
background: #000;
background-color: rgba(0,0,0,0.6);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-moz-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-ms-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
-o-transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
transition: 750ms opacity 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 975ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 975ms ease;
}
.csslider1 > .cs_description > label > .cs_descr {
font-size: 0.8em;
margin: 1px 10px;
opacity: 0;
visibility: hidden;
z-index: 1;
background-color: #E34B64;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms visibility 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_title > .cs_wrapper {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1450ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.csslider1 > .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -webkit-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-moz-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -moz-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-ms-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -ms-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
-o-transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms -o-transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
transition: 750ms opacity 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550), 750ms transform 1675ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
/* calculate autoplay */
@-webkit-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
@keyframes cs_descrWrapper {
1.53125%, 35.520833333333336% { z-index: 2; }
35.530833333333334%, 100% { z-index: 0; }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 {
-webkit-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
-o-animation: cs_descrWrapper 24000ms infinite -1400ms ease;
animation: cs_descrWrapper 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 {
-webkit-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
-o-animation: cs_descrWrapper 24000ms infinite 6600ms ease;
animation: cs_descrWrapper 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 {
-webkit-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-moz-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-ms-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
-o-animation: cs_descrWrapper 24000ms infinite 14600ms ease;
animation: cs_descrWrapper 24000ms infinite 14600ms ease;
}
@-webkit-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -webkit-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -webkit-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -moz-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -moz-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -ms-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -ms-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; -o-transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; -o-transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@keyframes cs_title {
1.53125%, 31.792083333333334% { opacity: 1; transform: rotateX(-9deg); z-index: 2; visibility: visible;}
2.1875%, 31.135833333333334% { opacity: 1; transform: rotateX(0deg); z-index: 2; visibility: visible;}
33.333333333333336% { opacity: 0; transform: rotateX(90deg); z-index: 2; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-webkit-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -webkit-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -webkit-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-moz-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -moz-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -moz-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -moz-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-ms-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -ms-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -ms-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -ms-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@-o-keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; -o-transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; -o-transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; -o-transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
@keyframes cs_descr {
3.0625%, 29.604583333333334% { opacity: 1; transform: rotateX(9deg); z-index: 1; visibility: visible;}
4.375%, 28.948333333333334% { opacity: 1; transform: rotateX(0deg); z-index: 1; visibility: visible;}
33.333333333333336% { opacity: 0; transform: rotateX(-90deg); z-index: 1; visibility: hidden;}
33.343333333333334%, 100% { z-index: 0; }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 > .cs_title {
-webkit-animation: cs_title 24000ms infinite -1400ms ease;
-moz-animation: cs_title 24000ms infinite -1400ms ease;
-ms-animation: cs_title 24000ms infinite -1400ms ease;
-o-animation: cs_title 24000ms infinite -1400ms ease;
animation: cs_title 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 > .cs_title {
-webkit-animation: cs_title 24000ms infinite 6600ms ease;
-moz-animation: cs_title 24000ms infinite 6600ms ease;
-ms-animation: cs_title 24000ms infinite 6600ms ease;
-o-animation: cs_title 24000ms infinite 6600ms ease;
animation: cs_title 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 > .cs_title {
-webkit-animation: cs_title 24000ms infinite 14600ms ease;
-moz-animation: cs_title 24000ms infinite 14600ms ease;
-ms-animation: cs_title 24000ms infinite 14600ms ease;
-o-animation: cs_title 24000ms infinite 14600ms ease;
animation: cs_title 24000ms infinite 14600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite -1400ms ease;
-moz-animation: cs_descr 24000ms infinite -1400ms ease;
-ms-animation: cs_descr 24000ms infinite -1400ms ease;
-o-animation: cs_descr 24000ms infinite -1400ms ease;
animation: cs_descr 24000ms infinite -1400ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite 6600ms ease;
-moz-animation: cs_descr 24000ms infinite 6600ms ease;
-ms-animation: cs_descr 24000ms infinite 6600ms ease;
-o-animation: cs_descr 24000ms infinite 6600ms ease;
animation: cs_descr 24000ms infinite 6600ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 > .cs_descr {
-webkit-animation: cs_descr 24000ms infinite 14600ms ease;
-moz-animation: cs_descr 24000ms infinite 14600ms ease;
-ms-animation: cs_descr 24000ms infinite 14600ms ease;
-o-animation: cs_descr 24000ms infinite 14600ms ease;
animation: cs_descr 24000ms infinite 14600ms ease;
}
@-webkit-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -webkit-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -webkit-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -webkit-transform: translateX(100%); }
}
@-moz-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -moz-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -moz-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -moz-transform: translateX(100%); }
}
@-ms-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -ms-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -ms-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -ms-transform: translateX(100%); }
}
@-o-keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; -o-transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; -o-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -o-transform: translateX(100%); }
}
@keyframes cs_title_text {
1.53125%, 31.792083333333334% { opacity: 1; transform: translateX(-1%); }
2.1875%, 31.135833333333334% { opacity: 1; transform: translateX(0%); }
33.333333333333336% { opacity: 0; transform: translateX(100%); }
}
@-webkit-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -webkit-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -webkit-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -webkit-transform: translateX(-100%); }
}
@-moz-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -moz-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -moz-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -moz-transform: translateX(-100%); }
}
@-ms-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -ms-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -ms-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -ms-transform: translateX(-100%); }
}
@-o-keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; -o-transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; -o-transform: translateX(0%); }
33.333333333333336% { opacity: 0; -o-transform: translateX(-100%); }
}
@keyframes cs_descr_text {
3.0625%, 29.604583333333334% { opacity: 1; transform: translateX(1%); }
4.375%, 28.948333333333334% { opacity: 1; transform: translateX(0%); }
33.333333333333336% { opacity: 0; transform: translateX(-100%); }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite -1190ms ease;
-moz-animation: cs_title_text 24000ms infinite -1190ms ease;
-ms-animation: cs_title_text 24000ms infinite -1190ms ease;
-o-animation: cs_title_text 24000ms infinite -1190ms ease;
animation: cs_title_text 24000ms infinite -1190ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite 6810ms ease;
-moz-animation: cs_title_text 24000ms infinite 6810ms ease;
-ms-animation: cs_title_text 24000ms infinite 6810ms ease;
-o-animation: cs_title_text 24000ms infinite 6810ms ease;
animation: cs_title_text 24000ms infinite 6810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 .cs_title > .cs_wrapper {
-webkit-animation: cs_title_text 24000ms infinite 14810ms ease;
-moz-animation: cs_title_text 24000ms infinite 14810ms ease;
-ms-animation: cs_title_text 24000ms infinite 14810ms ease;
-o-animation: cs_title_text 24000ms infinite 14810ms ease;
animation: cs_title_text 24000ms infinite 14810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num0 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite -1190ms ease;
-moz-animation: cs_descr_text 24000ms infinite -1190ms ease;
-ms-animation: cs_descr_text 24000ms infinite -1190ms ease;
-o-animation: cs_descr_text 24000ms infinite -1190ms ease;
animation: cs_descr_text 24000ms infinite -1190ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num1 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite 6810ms ease;
-moz-animation: cs_descr_text 24000ms infinite 6810ms ease;
-ms-animation: cs_descr_text 24000ms infinite 6810ms ease;
-o-animation: cs_descr_text 24000ms infinite 6810ms ease;
animation: cs_descr_text 24000ms infinite 6810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > .num2 .cs_descr > .cs_wrapper {
-webkit-animation: cs_descr_text 24000ms infinite 14810ms ease;
-moz-animation: cs_descr_text 24000ms infinite 14810ms ease;
-ms-animation: cs_descr_text 24000ms infinite 14810ms ease;
-o-animation: cs_descr_text 24000ms infinite 14810ms ease;
animation: cs_descr_text 24000ms infinite 14810ms ease;
}
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_title,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_descr,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_title > .cs_wrapper,
.csslider1.cs_pauseHover:hover > .cs_description > label > .cs_descr > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_title > .cs_wrapper,
.csslider1 > #cs_pause1:checked ~ .cs_description > label > .cs_descr > .cs_wrapper {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_description > label {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
@media
only screen and (max-width: 480px),
only screen and (-webkit-max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( max--moz-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( -o-max-device-pixel-ratio: 2/1) and (max-width: 480px),
only screen and ( max-device-pixel-ratio: 2) and (max-width: 480px),
only screen and ( max-resolution: 192dpi) and (max-width: 480px),
only screen and ( max-resolution: 2dppx) and (max-width: 480px) {
.csslider1 > .cs_description,
.csslider1 > .cs_bullets {
display: none;
}
}
2. Слайдер с подписями к изображениям
HTML
<div class="slides">
<ul> <!-- slides -->
<li><img src="http://www.script-tutorials.com/demos/284/images/pic1.jpg" alt="image01" />
<div>Promo text #1</div>
</li>
<li><img src="http://www.script-tutorials.com/demos/284/images/pic2.jpg" alt="image02" />
<div>Promo text #2</div>
</li>
<li><img src="http://www.script-tutorials.com/demos/284/images/pic3.jpg" alt="image03" />
<div>Promo text #3</div>
</li>
<li><img src="http://www.script-tutorials.com/demos/284/images/pic4.jpg" alt="image04" />
<div>Promo text #4</div>
</li>
</ul>
</div>
CSS
/* fade slider */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
3. Простой полноэкранный слайдер с эффектом затухания
HTML
<img src="http://i.imgur.com/EJD7Rs8.jpg" /> <img src="http://i.imgur.com/iLFS6JK.jpg" /> <img src="http://i.imgur.com/R32uG9K.jpg" /> <img src="http://i.imgur.com/oeXeCU1.jpg" /> <img src="http://i.imgur.com/V3Fe50P.jpg" />
CSS
img {
position: fixed;
width: 100%;
height: 100%;
}
img:nth-child(5) {
animation: efecto_fade 30s 0s infinite;
}
img:nth-child(4) {
animation: efecto_fade 30s 6s infinite;
}
img:nth-child(3) {
animation: efecto_fade 30s 12s infinite;
}
img:nth-child(2) {
animation: efecto_fade 30s 18s infinite;
}
img:nth-child(1) {
animation: efecto_fade 30s 24s infinite;
}
@keyframes efecto_fade {
17% { opacity:1; }
25% { opacity:0; }
90% { opacity:0; }
}
4. Слайдер с описанием при наведении
HTML
<div id="wrapper">
<div class="container">
<a href="#"><img src="https://lh6.googleusercontent.com/-bVi65DhReuQ/VJeqLSMHLWI/AAAAAAAAASc/KcGswc7CHSw/w500-h400-no/huong-dan-tao-slideshow-bang-css3-dep-mat.jpg" alt=""/></a>
<div class="caption">
<h2>Lorem ipsum dolor sit amet !</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div> <!-- end .caption -->
</div> <!-- end .container01 -->
<div class="container">
<a href="#"><img src="https://lh4.googleusercontent.com/-3giGE-QQAJA/VJeqLXQJ2NI/AAAAAAAAASs/MCvJgix0bZc/w500-h400-no/huong-dan-tao-slideshow-bang-css3-khong-dung-jquery-hay-javascript.jpg" alt=""/></a>
<div class="caption">
<h2>Lorem ipsum dolor sit amet !</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div> <!-- end .caption -->
</div> <!-- end .container02 -->
<div class="container">
<a href="#"><img src="https://lh6.googleusercontent.com/-REwj3jUDAJc/VJeqLYUu_OI/AAAAAAAAASk/W7dISLOD0pI/s500-no/huong-dan-tao-slideshow-bang-css3-khong-dung-js.jpg" alt=""/></a>
<div class="caption">
<h2>Lorem ipsum dolor sit amet !</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div> <!-- end .caption -->
</div> <!-- end .container03 -->
<div class="container">
<a href="#"><img src="https://lh5.googleusercontent.com/-GwZA2pjj-Mo/VJeqMGgLaRI/AAAAAAAAASo/e8BjWGfSc9s/w500-h400-no/huong-dan-tao-slideshow-bang-css3-tuyet-dep.jpg" alt=""/></a>
<div class="caption">
<h2>Lorem ipsum dolor sit amet !</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div> <!-- end .caption -->
</div> <!-- end .container04 -->
<div class="container">
<a href="#"><img src="https://lh6.googleusercontent.com/-4i9iqCFHYZw/VJeqMRbx7gI/AAAAAAAAASw/TqmB7n0LmkU/w500-h400-no/huong-dan-tao-slideshow-bang-css3.jpg" alt=""/></a>
<div class="caption">
<h2>Lorem ipsum dolor sit amet !</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div> <!-- end .caption -->
</div> <!-- end .container05 -->
</div> <!-- end #wrapper -->
CSS
div#wrapper{
width:500px;
height:400px;
margin:0 auto;
padding:0;
overflow:hidden;
position:relative;
transition:all .5s ease 0s;
-moz-transition:all .5s ease 0s;
-webkit-transition:all .5s ease 0s;
-o-transition:all .5s ease 0s;
-ms-transition:all .5s ease 0s;
}
div.container{
width:100%;
height:100%;
position:relative;
overflow:hidden;
position:absolute;
top:0;
left:-100%;
}
a{
text-decoration:none;
}
div.container > a > img{
width:100%;
height:100%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
div.caption{
width:40%;
height:100%;
padding:2% 0;
position:absolute;
top:0;
right:-100%;
opacity: 0;
-webkit-transition: all .5s cubic-bezier(0,1,0.7,1);
-moz-transition: all .5s cubic-bezier(0,1,0.7,1);
-ms-transition: all .5s cubic-bezier(0,1,0.7,1);
-o-transition: all .5s cubic-bezier(0,1,0.7,1);
transition: all .5s cubic-bezier(0,1,0.7,1);
background:rgba(0,0,0,.9);
}
div.container:hover > div.caption{
right: 0 !important;
opacity: 1 !important;
}
div.container:hover > div.caption > h2, div.container:hover > div.caption > p {
right: -5% !important;
opacity: 1 !important;
}
div.caption > h2, div.caption > p {
position: relative;
right: -40%;
opacity: 0;
-webkit-transition: all .5s cubic-bezier(0,1,0.5,1) .18s;
-moz-transition: all .5s cubic-bezier(0,1,0.5,1) .18s;
-ms-transition: all .5s cubic-bezier(0,1,0.5,1) .18s;
-o-transition: all .5s cubic-bezier(0,1,0.5,1) .18s;
transition: all .5s cubic-bezier(0,1,0.5,1) .18s;
}
div.caption > h2, div.caption > p{
color:white;
}
/*************************************
Preparing
*************************************/
div.container:nth-child(1) {
-moz-animation:slider 25s ease-in-out infinite;
-o-animation:slider 25s ease-in-out infinite;
-webkit-animation:slider 25s ease-in-out infinite;
animation:slider 25s ease-in-out infinite;
}
div.container:nth-child(2) {
-moz-animation:slider01 25s ease-in-out infinite;
-o-animation:slider01 25s ease-in-out infinite;
-webkit-animation:slider01 25s ease-in-out infinite;
animation:slider01 25s ease-in-out infinite;
}
div.container:nth-child(3) {
-moz-animation:slider02 25s ease-in-out infinite;
-o-animation:slider02 25s ease-in-out infinite;
-webkit-animation:slider02 25s ease-in-out infinite;
animation:slider02 25s ease-in-out infinite;
}
div.container:nth-child(4) {
-moz-animation:slider03 25s ease-in-out infinite;
-o-animation:slider03 25s ease-in-out infinite;
-webkit-animation:slider03 25s ease-in-out infinite;
animation:slider03 25s ease-in-out infinite;
}
div.container:nth-child(5) {
-moz-animation:slider04 25s ease-in-out infinite;
-o-animation:slider04 25s ease-in-out infinite;
-webkit-animation:slider04 25s ease-in-out infinite;
animation:slider04 25s ease-in-out infinite;
}
/**************************************
Animation webkit
**************************************/
@-webkit-keyframes slider {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; z-index:0; }
20% { left:100%; z-index:0; }
21% { left:-100%; z-index:-1; }
50% { left:-100%; z-index:-1; }
92% { left:-100%; z-index:0; }
96% { left:-100%; }
100%{ left:0px; }
}
@-webkit-keyframes slider01 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; z-index:0; }
40% { left:100%; z-index:0; }
41% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-webkit-keyframes slider02 {
0% { left:-100%; }
36% { left:-100%; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; z-index:0; }
60% { left:100%; z-index:0; }
61% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-webkit-keyframes slider03 {
0% { left:-100%; }
56% { left:-100%; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; z-index:0; }
80% { left:100%; z-index:0; }
81% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-webkit-keyframes slider04 {
0% { left:-100%; }
76% { left:-100%; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; z-index:0; }
100%{ left:100%; z-index:0; }
}
/**************************************
Animation moz
**************************************/
@-moz-keyframes slider {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; z-index:0; }
20% { left:100%; z-index:0; }
21% { left:-100%; z-index:-1; }
50% { left:-100%; z-index:-1; }
92% { left:-100%; z-index:0; }
96% { left:-100%; }
100%{ left:0px; }
}
@-moz-keyframes slider01 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; z-index:0; }
40% { left:100%; z-index:0; }
41% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-moz-keyframes slider02 {
0% { left:-100%; }
36% { left:-100%; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; z-index:0; }
60% { left:100%; z-index:0; }
61% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-moz-keyframes slider03 {
0% { left:-100%; }
56% { left:-100%; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; z-index:0; }
80% { left:100%; z-index:0; }
81% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-moz-keyframes slider04 {
0% { left:-100%; }
76% { left:-100%; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; z-index:0; }
100%{ left:100%; z-index:0; }
}
/**************************************
Animation o
**************************************/
@-o-keyframes slider {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; z-index:0; }
20% { left:100%; z-index:0; }
21% { left:-100%; z-index:-1; }
50% { left:-100%; z-index:-1; }
92% { left:-100%; z-index:0; }
96% { left:-100%; }
100%{ left:0px; }
}
@-o-keyframes slider01 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; z-index:0; }
40% { left:100%; z-index:0; }
41% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-o-keyframes slider02 {
0% { left:-100%; }
36% { left:-100%; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; z-index:0; }
60% { left:100%; z-index:0; }
61% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-o-keyframes slider03 {
0% { left:-100%; }
56% { left:-100%; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; z-index:0; }
80% { left:100%; z-index:0; }
81% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@-o-keyframes slider04 {
0% { left:-100%; }
76% { left:-100%; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; z-index:0; }
100%{ left:100%; z-index:0; }
}
/**************************************
Animation
**************************************/
@keyframes slider {
0% { left:0px; }
4% { left:0px; }
16% { left:0px; z-index:0; }
20% { left:100%; z-index:0; }
21% { left:-100%; z-index:-1; }
50% { left:-100%; z-index:-1; }
92% { left:-100%; z-index:0; }
96% { left:-100%; }
100%{ left:0px; }
}
@keyframes slider01 {
0% { left:-100%; }
16% { left:-100%; }
20% { left:0px; }
24% { left:0px; }
36% { left:0px; z-index:0; }
40% { left:100%; z-index:0; }
41% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@keyframes slider02 {
0% { left:-100%; }
36% { left:-100%; }
40% { left:0px; }
44% { left:0px; }
56% { left:0px; z-index:0; }
60% { left:100%; z-index:0; }
61% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@keyframes slider03 {
0% { left:-100%; }
56% { left:-100%; }
60% { left:0px; }
64% { left:0px; }
76% { left:0px; z-index:0; }
80% { left:100%; z-index:0; }
81% { left:-100%; z-index:-1; }
100%{ left:-100%; z-index:-1; }
}
@keyframes slider04 {
0% { left:-100%; }
76% { left:-100%; }
80% { left:0px; }
84% { left:0px; }
96% { left:0px; z-index:0; }
100%{ left:100%; z-index:0; }
}
5.Очень простой слайдер с эффектом перехода
HTML
<div id="stage"> <img src="http://2.bp.blogspot.com/_bRNnsKPyfuA/S-QbZUS-DBI/AAAAAAAACLE/QREDE8w8vFM/s1600/flo45s.jpg" alt=""> <img src="http://1.bp.blogspot.com/_bRNnsKPyfuA/S-Qb1w_bF5I/AAAAAAAACN8/DgGdMhMZVUQ/s1600/Hibiscus+flowers.jpg" alt=""> <img src="http://3.bp.blogspot.com/_bRNnsKPyfuA/S-QbpvzKV2I/AAAAAAAACM8/wWJxvQHmQ04/s1600/flower2b.jpg" alt=""> </div>
CSS
#stage{
position:relative;
margin:30px auto;
width:400px;
}
#stage img{
position:absolute;
top:0;
left:0;
width:400px;
opacity:0;
animation-name:fading;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#stage img:nth-of-type(1){animation-delay: 0s;}
#stage img:nth-of-type(2){animation-delay: 5s;}
#stage img:nth-of-type(3){animation-delay: 10s;}
@keyframes fading {
0%{opacity:0; }
5%{opacity:1;}
33%{opacity:1;}
38%{opacity:0;}
100%{opacity:0;}
}
6.Очень простой слайдер с зум – эффектом
HTML
<ul class="container"> <li><img src="http://photos-h.ak.instagram.com/hphotos-ak-xaf1/10576066_1452106215057991_157120494_n.jpg"/></li> <li><img src="http://photos-a.ak.instagram.com/hphotos-ak-xpa1/924565_696214703794888_2067014113_n.jpg"/></li> <li><img src="http://photos-c.ak.instagram.com/hphotos-ak-xfa1/10593344_1455720094715122_1088633763_n.jpg"/></li> <li><img src="http://photos-g.ak.instagram.com/hphotos-ak-xap1/10369454_838574509504398_2138456655_n.jpg"/></li> <li><img src="http://photos-a.ak.instagram.com/hphotos-ak-xfp1/10299716_772415122782264_215340893_n.jpg"/></li> <li><img src="http://photos-e.ak.instagram.com/hphotos-ak-xap1/925512_1420867308192116_1457138105_n.jpg"/></li> </ul>
CSS
@import "compass/css3";
body{background:#202133;}
$delay: 3;
$numberOfSlides:6;
@mixin fadeSlide($numberOfSlides, $delay: 4) {
opacity:0;
$totalDuration: $delay*$numberOfSlides;
animation:fade #{$totalDuration}s infinite forwards;
@for $i from 1 through $numberOfSlides {
&:nth-child(#{$i}) {
animation-delay: #{($delay*$i)}s;
}
}
}
.container{
margin:50px auto;
width:640px;
height:440px;
overflow:hidden;
position:relative;
list-style: none;
padding: 0;
li {
position:absolute;
img {
max-width: 100%;
}
@include fadeSlide(6);
&:first-child {
opacity: 1;
}
}
}
@include keyframes(fade) {
25%{
opacity:1;
}
40%{
@include transform(scale(1.1) translateZ(0));
opacity: .001;
}
}
7.Полноэкранный слайдер
HTML
<div class="slider-container">
<div class="slider">
<a href="https://www.youtube.com/watch?v=N4ZINBI-9Rw"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Clase-1-Curso-HTML-HTML5.png" alt="" /></a>
<a href="https://www.youtube.com/watch?v=X8IJr10djf8"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Youtube-Curso-Csharp-2.png" alt="" /></a>
<a href="https://www.youtube.com/watch?v=gO9tTO6ZPSk"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Youtube-Curso-SQL.png" alt="" /></a>
<a href="https://www.youtube.com/watch?v=N4ZINBI-9Rw"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Clase-1-Curso-HTML-HTML5.png" alt="" /></a>
</div>
</div>
CSS
body { margin: 0; }
.slider-container { overflow: hidden; }
.slider {
position: relative;
width: 400%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 10s mov--der-izq infinite;
animation-play-state: running;
}
.slider:hover {
animation-play-state: paused;
}
.slider a img { width: 25%; float: left; }
/*ANIMACIÓN*/
@keyframes mov--der-izq {
0% { left: 0%; } /*empieza em posicion inicial*/
33.333% { left: 0%; } /*cambio de la primera a la segunda img*/
38.333% { left: -100%; } /*se queda parado*/
68.333% { left: -100%; } /*cambio de la segunda a la tercera img*/
73.333% { left: -200%; } /*se queda parado*/
93.333% { left: -200%; } /*Vuelve a mostrar la primera img para que no haya un salto repentino a la primera img*/
100% { left: -300%; }
}
8.Слайдер контента
HTML
<div class="container">
<ul>
<li>
100%
</li>
<li>
CSS
</li>
<li>
Slider
</li>
</ul>
</div>
This Slider uses 100% of the purest CSS no JS.
CSS
body{
background:#666;
font-family:arial;
color:#eee;
font-size:20px;
}
.container{
position: absolute;
top:50%;
left:50%;
margin-top:-80px;
margin-left:-200px;
width:400px;
height:160px;
overflow:hidden;
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
ul{
margin:0px;
padding:0px;
height:160px;
width:1200px;
position:relative;
animation:slide 5s linear 2s infinite alternate;
-webkit-animation:slide 5s linear 2s infinite alternate; /* Safari and Chrome */
}
ul:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
li{
list-style:none;
width:400px;
height:160px;
background:#82B808;
color:#fff;
float:left;
text-align:center;
font-size:130px;
font-family:arial;
}
@keyframes slide
{
0% {left:0px; top:0px;}
20% {left:0px; top:0px;}
40% {left:-400px; top:0px;}
60% {left:-400px; top:0px;}
80% {left:-800px; top:0px;}
100% {left:-800px; top:0px;}
}
@-webkit-keyframes slide /* Safari and Chrome */
{
0% {left:0px; top:0px;}
20% {left:0px; top:0px;}
40% {left:-400px; top:0px;}
60% {left:-400px; top:0px;}
80% {left:-800px; top:0px;}
100% {left:-800px; top:0px;}
}
9.Слайдер со сдвигом изображений
HTML
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="cssSlider"> <div id="sliderImages"> <img id="si_1" src="http://f.cybrox.eu/codepen/slider/slide1.jpg" alt="" /> <img id="si_2" src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" /> <img id="si_3" src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" /> <img id="si_4" src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" /> <img id="si_5" src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" /> <div style="clear:left;"></div> </div> </div> </body> </html>
CSS
#cssSlider {
width: 800px;
height: 300px;
overflow: hidden;
border: 10px solid #666;
}
#sliderImages {
width : 4000px;
height: 300px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}
#sliderImages img {
float: left;
}
@keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
97%{margin-left: -3200px;}
100%{margin-left: 0px;}
}
@-moz-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
@-webkit-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
@-o-keyframes slide{
0%{margin-left: 0px;}
17%{margin-left: 0px;}
20%{margin-left: -800px;}
37%{margin-left: -800px;}
40%{margin-left: -1600px;}
57%{margin-left: -1600px;}
60%{margin-left: -2400px;}
77%{margin-left: -2400px;}
80%{margin-left: -3200px;}
100%{margin-left: -3200px;}
}
10.Слайдер с эффектом затухания
HTML
<div class="container"> <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" /> <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" /> </div>
CSS
body{background:#000;}
.container{
margin:50px auto;
width:500px;
height:300px;
overflow:hidden;
border:10px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:#856036;
border-right-color:#5d4426;
position:relative;
}
.photo{
position:absolute;
animation:round 16s infinite;
opacity:0;
}
@keyframes round{
25%{opacity:1;}
40%{opacity:0;}
}
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}
11.CSS3 слайдер изображений с авто прокруткой
Html
<div class="container">
<div id="content-slider">
<div id="slider"> <!-- Slider container -->
<div id="mask"> <!-- Mask -->
<ul>
<li id="first" class="firstanimation"> <!-- ID for tooltip and class for animation -->
<a href="#"> <img src="http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_1.jpg" alt="Cougar"/> </a>
<div class="tooltip"> <h1>Cougar</h1> </div>
</li>
<li id="second" class="secondanimation">
<a href="#"> <img src="http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_2.jpg" alt="Lions"/> </a>
<div class="tooltip"> <h1>Lions</h1> </div>
</li>
<li id="third" class="thirdanimation">
<a href="#"> <img src="http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_3.jpg" alt="Snowalker"/> </a>
<div class="tooltip"> <h1>Snowalker</h1> </div>
</li>
<li id="fourth" class="fourthanimation">
<a href="#"> <img src="http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_4.jpg" alt="Howling"/> </a>
<div class="tooltip"> <h1>Howling</h1> </div>
</li>
<li id="fifth" class="fifthanimation">
<a href="#"> <img src="http://www.htmldrive.net/edit_media/2012/201205/20120529/CSS3-Slider/images/img_5.jpg" alt="Sunbathing"/> </a>
<div class="tooltip"> <h1>Sunbathing</h1> </div>
</li>
</ul>
</div> <!-- End Mask -->
<div class="progress-bar"></div> <!-- Progress Bar -->
</div> <!-- End Slider Container -->
</div>
</div>
CSS
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Common */
html, body {
background:#eaeaea url(../img/bg.png) repeat;
font-size:12px;
font-family:"Open Sans", serif;
min-width:960px;
margin:0;
padding:0;
color:#aaa;
}
.content h1 {
font-size:48px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}
/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}
/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}
12. Простой слайдер с подписями
HTML
<div id="rotator"> <i class="pause"> <!--Pause Icon shows while user hovered --></i> <div class="mask"> <ul> <li> <img src="http://placehold.it/450x300&text=Image+1" /> <div class="caption"> <h4>Katarina</h4> <p>Fruitcake bonbon donut jelly-o brownie biscuit marzipan pie.</p> </div> </li> <li> <img src="http://placehold.it/450x300&text=Image+2" /> <div class="caption"> <h4>Red Card Katarina</h4> <p>Cheesecake marzipan cupcake biscuit candy canes pudding.</p> </div> </li> <li> <img src="http://placehold.it/450x300&text=Image+3" /> <div class="caption"> <h4>Kitty Cat Katarina</h4> <p>Applicake topping halvah lemon drops wypas cotton candy.</p> </div> </li> <li> <img src="http://placehold.it/450x300&text=Image+4" /> <div class="caption"> <h4>High Command Katarina</h4> <p>Oat cake macaroon souffle cupcake chupa chups chocolate bar bear claw dragee lemon drops.</p> </div> </li> <li> <img src="http://placehold.it/450x300&text=Image+5" /> <div class="caption"> <h4>Katarina</h4> <p>Fruitcake bonbon donut jelly-o brownie biscuit marzipan pie.</p> </div> </li> </ul> </div> <div class="progress-bar"> </div> </div>
CSS
#rotator {
position: relative;
width: 450px; height: 300px;
background: #aaa;
overflow:visible;
border:5px solid #DFDFDF;
}
#rotator .mask{
width:450px;
height:auto;
overflow:hidden;
}
#rotator ul li{
position: relative;
float:left;
width: 450px;
height: 300px;
}
#rotator ul li img {
display: block;
}
#rotator ul li .caption {
position: absolute;
z-index: 5;
background: rgba(0,0,0,0.4);
width: 100%;
height: auto;
bottom: 0;
padding-bottom: 5px;
}
#rotator ul li .caption h4, #rotator ul li .caption p {
margin: 5px 15px;
color: white;
text-shadow: 0 0 5px black;
}
/*PROGRESS BAR*/
#rotator .progress-bar {
background-color: #DC291E;
height: 3px;
width: 450px;
position: relative;
bottom: 3px;
z-index: 5;
-webkit-animation:progress 15s infinite;
-moz-animation:progress 15s infinite;
-o-animation:progress 15s infinite;
animation:progress 15s infinite;
}
/*PAUSE ICON*/
#rotator .pause{
visibility: hidden;
border: 5px solid white;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0px 0px 3px #666;
-webkit-box-shadow: 0px 0px 3px #666;
-moz-box-shadow: 0px 0px 3px #666;
width: 40px;
height: 30px;
padding-top: 10px;
top: 10px;
right: 10px;
position: absolute;
-webkit-animation:blink 2s infinite;
-moz-animation:blink 2s infinite;
-o-animation:blink 2s infinite;
animation:blink 2s infinite;
}
#rotator .pause:after,
#rotator .pause:before{
position: relative;
content: "";
height: 20px;
width: 5px;
background-color: white;
display: inline-block;
margin: 0 6px;
box-shadow: 0px 0px 3px #666;
-webkit-box-shadow: 0px 0px 3px #666;
-moz-box-shadow: 0px 0px 3px #666;
}
#rotator .pause:before{
left:5px;
}
#rotator .pause:after{
right: 5px;
}
#rotator:hover ul, #rotator:hover .progress-bar {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#rotator:hover .pause{
z-index: 10;
visibility: visible;
}
#rotator ul{
list-style:none;
padding:0;
margin:0;
position: relative;
width:2250px;
-webkit-animation:cycle 15s infinite;
-moz-animation:cycle 15s infinite;
-o-animation:cycle 15s infinite;
animation:cycle 15s infinite;
}
/* SLIDER KEYFRAMES */
@-webkit-keyframes cycle{
0% { left:0px; }
18% { left:0px; }
24% { left:-450px;}
42% { left:-450px;}
48% { left:-900px;}
66% { left:-900px;}
72% { left:-1350px;}
90% { left:-1350px;}
100% { left:-1800px;}
}
@-moz-keyframes cycle{
0% { left:0px; }
18% { left:0px; }
24% { left:-450px;}
42% { left:-450px;}
48% { left:-900px;}
66% { left:-900px;}
72% { left:-1350px;}
90% { left:-1350px;}
100% { left:-1800px;}
}
@-o-keyframes cycle{
0% { left:0px; }
18% { left:0px; }
24% { left:-450px;}
42% { left:-450px;}
48% { left:-900px;}
66% { left:-900px;}
72% { left:-1350px;}
90% { left:-1350px;}
100% { left:-1800px;}
}
@keyframes cycle{
0% { left:0px; }
18% { left:0px; }
24% { left:-450px;}
42% { left:-450px;}
48% { left:-900px;}
66% { left:-900px;}
72% { left:-1350px;}
90% { left:-1350px;}
100% { left:-1800px;}
}
/* PROGRESS BAR KEYFRAMES */
@keyframes progress{
0% { width:0px; }
18% { width:450px; }
19% { width:0px;}
24% { width:0px;}
42% { width:450px;}
43% { width:0px;}
48% { width:0px;}
66% { width:450px;}
67% { width:0px;}
72% { width:0px;}
90% { width:450px;}
100% { width:0px;}
}
@-webkit-keyframes progress{
0% { width:0px; }
18% { width:450px; }
19% { width:0px;}
24% { width:0px;}
42% { width:450px;}
43% { width:0px;}
48% { width:0px;}
66% { width:450px;}
67% { width:0px;}
72% { width:0px;}
90% { width:450px;}
100% { width:0px;}
}
@-moz-keyframes progress{
0% { width:0px; }
18% { width:450px; }
19% { width:0px;}
24% { width:0px;}
42% { width:450px;}
43% { width:0px;}
48% { width:0px;}
66% { width:450px;}
67% { width:0px;}
72% { width:0px;}
90% { width:450px;}
100% { width:0px;}
}
@-o-keyframes progress{
0% { width:0px; }
18% { width:450px; }
19% { width:0px;}
24% { width:0px;}
42% { width:450px;}
43% { width:0px;}
48% { width:0px;}
66% { width:450px;}
67% { width:0px;}
72% { width:0px;}
90% { width:450px;}
100% { width:0px;}
}
/* PAUSE FADING KEYFRAMES*/
@keyframes blink{
0% { opacity:0; }
50% { opacity:1;}
100% { opacity:0; }
}
@-webkit-keyframes blink{
0% { opacity:0; }
50% { opacity:1;}
100% { opacity:0; }
}