Saturday, 20 May 2017
CSS SLIDER WITHOUT JS
-----------------------------------------------------------------------------------------------------------
ReadMore:
http://cssslider.com/non-jquery-carousel-7.html
SAVE impresscontrols.woff FILE IN SAME FOLDER
FOR DOWNLOAD impresscontrols.woff FILE
http://cssslider.com/sliders/demo-7/engine1/impresscontrols.woff
GO TO DUMMY IMAGE GENERATOR WEBSITE USE CUSTOMISE OPTION
TWO IMAGES GENERATE FOR IMAGE FOR SLIDER, RADIO BUTTON
SLIDER IMAGE SIZE
960x360 USE IMAGE LINK 4 TIMES
http://img.dummy-image-generator.com/abstract/dummy-960x360-Glass.jpg
128x48 USE THUMB IMAGE RADIO BUTTON LINK 1 TIMES
http://img.dummy-image-generator.com/abstract/dummy-128x48-Glass.jpg
-----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
<html xml:lang="en-gb" lang="en-gb">
<!-- http://cssslider.com/non-jquery-carousel-7.html -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>non-jQuery Carousel - Amazing 100% CSS3 carousel</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic);
@font-face {
font-family: "controls";
src: url("impresscontrols.eot");
src: url("impresscontrols.eot#iefix") format("embedded-opentype"),
/* DOWLOAD AND SAVE impresscontrols.woff FILE IN SAME FOLDER*/
url("impresscontrols.woff") format("woff"),
url("impresscontrols.ttf") format("truetype"),
url("impresscontrols.svg#impress") format("svg");
font-weight: normal;
font-style: normal;
}
.csslider1 {
display: inline-block;
position: relative;
max-width: 960px;
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;
}
.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 > ul > li.img,
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext,
.csslider1 > .cs_bullets,
.csslider1 > .cs_play_pause {
-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_arrowprev,
.csslider1 > .cs_arrownext {
position: absolute;
top: 50%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
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 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label {
opacity: 0;
z-index: -1;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num3,
.csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num3,
.csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_pause1_0:checked ~ .cs_arrownext > label.num1,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_pause1_1:checked ~ .cs_arrownext > label.num2,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num3,
.csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num3,
.csslider1 > #cs_slide1_3:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_pause1_3:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_slide1_3:checked ~ .cs_arrownext > label.num0,
.csslider1 > #cs_pause1_3:checked ~ .cs_arrownext > label.num0 {
opacity: 1;
z-index: 5;
}
/* calculate autoplay */
@-webkit-keyframes arrow {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-moz-keyframes arrow {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-ms-keyframes arrow {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-o-keyframes arrow {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@keyframes arrow {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num3,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1 {
-webkit-animation: arrow 16000ms infinite -2000ms;
-moz-animation: arrow 16000ms infinite -2000ms;
-ms-animation: arrow 16000ms infinite -2000ms;
-o-animation: arrow 16000ms infinite -2000ms;
animation: arrow 16000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 {
-webkit-animation: arrow 16000ms infinite 2000ms;
-moz-animation: arrow 16000ms infinite 2000ms;
-ms-animation: arrow 16000ms infinite 2000ms;
-o-animation: arrow 16000ms infinite 2000ms;
animation: arrow 16000ms infinite 2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num3 {
-webkit-animation: arrow 16000ms infinite 6000ms;
-moz-animation: arrow 16000ms infinite 6000ms;
-ms-animation: arrow 16000ms infinite 6000ms;
-o-animation: arrow 16000ms infinite 6000ms;
animation: arrow 16000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2,
.csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 {
-webkit-animation: arrow 16000ms infinite 10000ms;
-moz-animation: arrow 16000ms infinite 10000ms;
-ms-animation: arrow 16000ms infinite 10000ms;
-o-animation: arrow 16000ms infinite 10000ms;
animation: arrow 16000ms infinite 10000ms;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_arrowprev > label,
.csslider1 > .slide:checked ~ .cs_arrownext > label,
.csslider1 > .pause:checked ~ .cs_arrowprev > label,
.csslider1 > .pause: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;
}
.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: -64px;
top: -48px;
}
.csslider1 > .cs_bullets > label > .cs_thumb > img {
max-width: none;
}.csslider1 > .cs_description {
z-index: 3;
}
.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 > .cs_play_pause {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
}
.csslider1 > .cs_play_pause > label {
position: absolute;
cursor: pointer;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .slide:checked ~ .cs_play_pause > .cs_play,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_play {
display: block;
z-index: 5;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play,
.csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
display: none;
z-index: -1;
}
/* calculate autoplay */
@-webkit-keyframes pauseChange {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-moz-keyframes pauseChange {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-ms-keyframes pauseChange {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@-o-keyframes pauseChange {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
@keyframes pauseChange {
0%, 24.99% { opacity: 1; z-index: 5; }
25%, 100% { opacity: 0; z-index: -1; }
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 {
opacity: 0;
z-index: -1;
-webkit-animation: pauseChange 16000ms infinite -2000ms;
-moz-animation: pauseChange 16000ms infinite -2000ms;
-ms-animation: pauseChange 16000ms infinite -2000ms;
-o-animation: pauseChange 16000ms infinite -2000ms;
animation: pauseChange 16000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 {
opacity: 0;
z-index: -1;
-webkit-animation: pauseChange 16000ms infinite 2000ms;
-moz-animation: pauseChange 16000ms infinite 2000ms;
-ms-animation: pauseChange 16000ms infinite 2000ms;
-o-animation: pauseChange 16000ms infinite 2000ms;
animation: pauseChange 16000ms infinite 2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 {
opacity: 0;
z-index: -1;
-webkit-animation: pauseChange 16000ms infinite 6000ms;
-moz-animation: pauseChange 16000ms infinite 6000ms;
-ms-animation: pauseChange 16000ms infinite 6000ms;
-o-animation: pauseChange 16000ms infinite 6000ms;
animation: pauseChange 16000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num3 {
opacity: 0;
z-index: -1;
-webkit-animation: pauseChange 16000ms infinite 10000ms;
-moz-animation: pauseChange 16000ms infinite 10000ms;
-ms-animation: pauseChange 16000ms infinite 10000ms;
-o-animation: pauseChange 16000ms infinite 10000ms;
animation: pauseChange 16000ms infinite 10000ms;
}
/* stop */
.csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
.csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay */
.csslider1.cs_handle {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
}
.csslider1 .cs_gestures {
visibility: hidden;
position: absolute;
font-size: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
opacity: 0;
-webkit-transition: visibility .3s linear, opacity .3s linear;
-o-transition: visibility .3s linear, opacity .3s linear;
transition: visibility .3s linear, opacity .3s linear;
}
.csslider1 .cs_gestures > div {
position: absolute;
left: 0;
top: 0;
width: 400%;
}
.csslider1 > #cs_slide1_0:checked ~ ul > li.num0,
.csslider1 > #cs_pause1_0:checked ~ ul > li.num0,
.csslider1 > #cs_slide1_1:checked ~ ul > li.num1,
.csslider1 > #cs_pause1_1:checked ~ ul > li.num1,
.csslider1 > #cs_slide1_2:checked ~ ul > li.num2,
.csslider1 > #cs_pause1_2:checked ~ ul > li.num2,
.csslider1 > #cs_slide1_3:checked ~ ul > li.num3,
.csslider1 > #cs_pause1_3:checked ~ ul > li.num3 {
opacity: 1;
z-index: 2;
}
.csslider1 > ul > li {
display: inline-block;
position: absolute;
left: 0;
top: 0;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 2000ms ease;
-moz-transition: opacity 2000ms ease;
-ms-transition: opacity 2000ms ease;
-o-transition: opacity 2000ms ease;
transition: opacity 2000ms ease;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* calculate autoplay */
@-webkit-keyframes fade {
0%, 37.5%, 100% { opacity: 0; z-index: 2; }
12.5%, 25% { opacity: 1; z-index: 2; }
}
@-moz-keyframes fade {
0%, 37.5%, 100% { opacity: 0; z-index: 2; }
12.5%, 25% { opacity: 1; z-index: 2; }
}
@-ms-keyframes fade {
0%, 37.5%, 100% { opacity: 0; z-index: 2; }
12.5%, 25% { opacity: 1; z-index: 2; }
}
@-o-keyframes fade {
0%, 37.5%, 100% { opacity: 0; z-index: 2; }
12.5%, 25% { opacity: 1; z-index: 2; }
}
@keyframes fade {
0%, 37.5%, 100% { opacity: 0; z-index: 2; }
12.5%, 25% { opacity: 1; z-index: 2; }
}
.csslider1 > #cs_play1:checked ~ ul > li.num0 {
-webkit-animation: fade 16000ms infinite -2000ms;
-moz-animation: fade 16000ms infinite -2000ms;
-ms-animation: fade 16000ms infinite -2000ms;
-o-animation: fade 16000ms infinite -2000ms;
animation: fade 16000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ ul > li.num1 {
-webkit-animation: fade 16000ms infinite 2000ms;
-moz-animation: fade 16000ms infinite 2000ms;
-ms-animation: fade 16000ms infinite 2000ms;
-o-animation: fade 16000ms infinite 2000ms;
animation: fade 16000ms infinite 2000ms;
}
.csslider1 > #cs_play1:checked ~ ul > li.num2 {
-webkit-animation: fade 16000ms infinite 6000ms;
-moz-animation: fade 16000ms infinite 6000ms;
-ms-animation: fade 16000ms infinite 6000ms;
-o-animation: fade 16000ms infinite 6000ms;
animation: fade 16000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ ul > li.num3 {
-webkit-animation: fade 16000ms infinite 10000ms;
-moz-animation: fade 16000ms infinite 10000ms;
-ms-animation: fade 16000ms infinite 10000ms;
-o-animation: fade 16000ms infinite 10000ms;
animation: fade 16000ms infinite 10000ms;
}
.csslider1 > #cs_play1:checked ~ ul > li,
.csslider1 > .pause:checked ~ ul > li {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* /calculate autoplay */
/* frame/shadow */
.csslider1 {
-webkit-box-shadow: 0 0 0 5px #D03A79;
-moz-box-shadow: 0 0 0 5px #D03A79;
box-shadow: 0 0 0 5px #D03A79;
margin-top: 15px;
}
.csslider1 > .cs_play_pause {
-webkit-transition: .4s all 0s ease;
-moz-transition: .4s all 0s ease;
-ms-transition: .4s all 0s ease;
-o-transition: .4s all 0s ease;
transition: .4s all 0s ease;
}
.csslider1 > .cs_arrowprev {
-webkit-transition: .4s all .15s ease;
-moz-transition: .4s all .15s ease;
-ms-transition: .4s all .15s ease;
-o-transition: .4s all .15s ease;
transition: .4s all .15s ease;
}
.csslider1 > .cs_arrownext {
-webkit-transition: .4s all .3s ease;
-moz-transition: .4s all .3s ease;
-ms-transition: .4s all .3s ease;
-o-transition: .4s all .3s ease;
transition: .4s all .3s ease;
}
.csslider1 > .cs_arrowprev,
.csslider1 > .cs_arrownext,
.csslider1 > .cs_play_pause {
opacity: 0;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
.csslider1:hover > .cs_arrowprev,
.csslider1:hover > .cs_arrownext,
.csslider1:hover > .cs_play_pause {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}.csslider1 > .cs_arrowprev > label,
.csslider1 > .cs_arrownext > label {
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
box-shadow: inset 0 0 0 2px #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.csslider1 > .cs_arrowprev {
margin-left: 10px;
left: 30px;
}
.csslider1 > .cs_arrownext {
margin-right: 10px;
right: 30px;
}
.csslider1 > .cs_arrowprev > label:after {
content: '\e801';
margin-left: -4px;
}
.csslider1 > .cs_arrownext > label:after {
content: '\e800';
margin-left: 4px;
}
.csslider1 > .cs_arrowprev > label:after,
.csslider1 > .cs_arrownext > label:after {
position: absolute;
display: block;
text-align: center;
font: 31px "controls";
line-height: 64px;
top: 0;
left: 0;
right: 0;
color: #fff;
}
/* IE10+ hack */
_:-ms-input-placeholder, :root .csslider1 > .cs_arrowprev > label:after {
line-height: 70px;
}
_:-ms-input-placeholder, :root .csslider1 > .cs_arrownext > label:after {
line-height: 70px;
}
.csslider1 > .cs_arrowprev:hover > label,
.csslider1 > .cs_arrownext:hover > label {
-webkit-box-shadow: inset 0 0 0 2px rgba(255,255,255,0);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0);
}
.csslider1 > .cs_arrowprev > label > span,
.csslider1 > .cs_arrownext > label > span {
display: block;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
z-index: -1;
}
.csslider1 > .cs_arrowprev > label i,
.csslider1 > .cs_arrownext > label i {
display: block;
width: 60px;
height: 0px;
background-color: #D03A79;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
.csslider1 > .cs_arrowprev:hover > label i,
.csslider1 > .cs_arrownext:hover > label i {
height: 60px;
}
.csslider1 > .cs_play_pause > label {
text-decoration: none;
margin-left: -30px;
margin-top: -30px;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 2px #fff;
box-shadow: inset 0 0 0 2px #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.csslider1 > .cs_play_pause > .cs_play:after {
content: '\e802';
}
.csslider1 > .cs_play_pause > .cs_pause:after {
content: '\e803';
}
.csslider1 > .cs_play_pause > label:after{
position: absolute;
display: block;
text-align: center;
font: 28px "controls";
line-height: 64px;
top: 0;
left: 0;
right: 0;
color: #fff;
}
/* IE10+ hack */
_:-ms-input-placeholder, :root .csslider1 > .cs_play_pause > label:after {
line-height: 72px;
}
.csslider1 > .cs_play_pause:hover > label {
-webkit-box-shadow: inset 0 0 0 2px rgba(255,255,255,0);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0);
}
.csslider1 > .cs_play_pause > label > span {
display: block;
width: 60px;
height: 60px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
z-index: -1;
}
.csslider1 > .cs_play_pause > label i {
display: block;
width: 60px;
height: 0px;
background-color: #D03A79;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
.csslider1 > .cs_play_pause:hover > label i {
height: 60px;
}
.csslider1 > .cs_bullets {
bottom: 5px;
margin-bottom: 5px;
}
.csslider1 > .cs_bullets > label {
margin: 0 10px;
padding: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid #fff;
background: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.csslider1 > .cs_bullets > label img {
border: 3px solid #D03A79;
}
.csslider1 > .cs_bullets > label > .cs_thumb {
overflow: hidden;
height: 0px;
opacity: 1;
margin-top: -13px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.csslider1 > .cs_bullets > label > .cs_thumb:before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 52px;
margin-left: -2px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #D03A79;
}
.csslider1 > .cs_bullets > label:hover > .cs_thumb {
height: 59px;
visibility: visible;
}
.csslider1 > .cs_bullets > label:hover,
.csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2,
.csslider1 > #cs_slide1_3:checked ~ .cs_bullets > label.num3,
.csslider1 > #cs_pause1_3:checked ~ .cs_bullets > label.num3 {
border: 2px solid rgba(255,255,255,0);
background: #D03A79;
}
/* calculate autoplay */
@-webkit-keyframes bullet {
0%, 24.99% { border: 2px solid rgba(255,255,255,0); background: #D03A79; }
25%, 100% { border: 2px solid #fff; background: transparent; }
}
@-moz-keyframes bullet {
0%, 24.99% { border: 2px solid rgba(255,255,255,0); background: #D03A79; }
25%, 100% { border: 2px solid #fff; background: transparent; }
}
@-ms-keyframes bullet {
0%, 24.99% { border: 2px solid rgba(255,255,255,0); background: #D03A79; }
25%, 100% { border: 2px solid #fff; background: transparent; }
}
@-o-keyframes bullet {
0%, 24.99% { border: 2px solid rgba(255,255,255,0); background: #D03A79; }
25%, 100% { border: 2px solid #fff; background: transparent; }
}
@keyframes bullet {
0%, 24.99% { border: 2px solid rgba(255,255,255,0); background: #D03A79; }
25%, 100% { border: 2px solid #fff; background: transparent; }
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 {
-webkit-animation: bullet 16000ms infinite -2000ms;
-moz-animation: bullet 16000ms infinite -2000ms;
-ms-animation: bullet 16000ms infinite -2000ms;
-o-animation: bullet 16000ms infinite -2000ms;
animation: bullet 16000ms infinite -2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 {
-webkit-animation: bullet 16000ms infinite 2000ms;
-moz-animation: bullet 16000ms infinite 2000ms;
-ms-animation: bullet 16000ms infinite 2000ms;
-o-animation: bullet 16000ms infinite 2000ms;
animation: bullet 16000ms infinite 2000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 {
-webkit-animation: bullet 16000ms infinite 6000ms;
-moz-animation: bullet 16000ms infinite 6000ms;
-ms-animation: bullet 16000ms infinite 6000ms;
-o-animation: bullet 16000ms infinite 6000ms;
animation: bullet 16000ms infinite 6000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label.num3 {
-webkit-animation: bullet 16000ms infinite 10000ms;
-moz-animation: bullet 16000ms infinite 10000ms;
-ms-animation: bullet 16000ms infinite 10000ms;
-o-animation: bullet 16000ms infinite 10000ms;
animation: bullet 16000ms infinite 10000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_bullets > label,
.csslider1 > .pause:checked ~ .cs_bullets > label {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* 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-family: 'Ubuntu', sans-serif;
font-size: 20px;
line-height: normal;
bottom: 40px;
}
.csslider1 > .cs_description > label > span {
color: #fff;
margin: 5px 10px;
padding: 10px;
border: 2px solid #fff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.csslider1 > #cs_slide1_0:checked ~ .cs_description > .num0,
.csslider1 > #cs_pause1_0:checked ~ .cs_description > .num0,
.csslider1 > #cs_slide1_1:checked ~ .cs_description > .num1,
.csslider1 > #cs_pause1_1:checked ~ .cs_description > .num1,
.csslider1 > #cs_slide1_2:checked ~ .cs_description > .num2,
.csslider1 > #cs_pause1_2:checked ~ .cs_description > .num2,
.csslider1 > #cs_slide1_3:checked ~ .cs_description > .num3,
.csslider1 > #cs_pause1_3:checked ~ .cs_description > .num3 {
opacity: 1;
z-index: 4;
-webkit-transition: .5s opacity .2s ease, .5s -webkit-transform .2s ease;
-moz-transition: .5s opacity .2s ease, .5s -moz-transform .2s ease;
-ms-transition: .5s opacity .2s ease, .5s -ms-transform .2s ease;
-o-transition: .5s opacity .2s ease, .5s -o-transform .2s ease;
transition: .5s opacity .2s ease, .5s transform .2s ease;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.csslider1 > .slide:checked ~ .cs_description > label {
opacity: 0;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
}
/* calculate autoplay */
@-webkit-keyframes cs_description {
3.125%, 15.615% { opacity: 1; z-index: 4; -webkit-transform: translateY(0); }
0%, 18.75%, 100% { opacity: 0; z-index: 0; -webkit-transform: translateY(-30px); }
}
@-moz-keyframes cs_description {
3.125%, 15.615% { opacity: 1; z-index: 4; -moz-transform: translateY(0); }
0%, 18.75%, 100% { opacity: 0; z-index: 0; -moz-transform: translateY(-30px); }
}
@-ms-keyframes cs_description {
3.125%, 15.615% { opacity: 1; z-index: 4; -ms-transform: translateY(0); }
0%, 18.75%, 100% { opacity: 0; z-index: 0; -ms-transform: translateY(-30px); }
}
@-o-keyframes cs_description {
3.125%, 15.615% { opacity: 1; z-index: 4; -o-transform: translateY(0); }
0%, 18.75%, 100% { opacity: 0; z-index: 0; -o-transform: translateY(-30px); }
}
@keyframes cs_description {
3.125%, 15.615% { opacity: 1; z-index: 4; transform: translateY(0); }
0%, 18.75%, 100% { opacity: 0; z-index: 0; transform: translateY(-30px); }
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num0 {
-webkit-animation: cs_description 16000ms infinite 0ms;
-moz-animation: cs_description 16000ms infinite 0ms;
-ms-animation: cs_description 16000ms infinite 0ms;
-o-animation: cs_description 16000ms infinite 0ms;
animation: cs_description 16000ms infinite 0ms;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num1 {
-webkit-animation: cs_description 16000ms infinite 4000ms;
-moz-animation: cs_description 16000ms infinite 4000ms;
-ms-animation: cs_description 16000ms infinite 4000ms;
-o-animation: cs_description 16000ms infinite 4000ms;
animation: cs_description 16000ms infinite 4000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num2 {
-webkit-animation: cs_description 16000ms infinite 8000ms;
-moz-animation: cs_description 16000ms infinite 8000ms;
-ms-animation: cs_description 16000ms infinite 8000ms;
-o-animation: cs_description 16000ms infinite 8000ms;
animation: cs_description 16000ms infinite 8000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_description > .num3 {
-webkit-animation: cs_description 16000ms infinite 12000ms;
-moz-animation: cs_description 16000ms infinite 12000ms;
-ms-animation: cs_description 16000ms infinite 12000ms;
-o-animation: cs_description 16000ms infinite 12000ms;
animation: cs_description 16000ms infinite 12000ms;
}
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_title,
.csslider1 > #cs_play1:checked ~ .cs_description > label > .cs_descr,
.csslider1 > .pause:checked ~ .cs_description > label > .cs_title,
.csslider1 > .pause:checked ~ .cs_description > label > .cs_descr {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/* stop */
.csslider1 > .play:checked ~ .cs_description > label > .cs_title,
.csslider1 > .play:checked ~ .cs_description > label > .cs_descr
.csslider1 > .pause:checked ~ .cs_description > label > .cs_title,
.csslider1 > .pause:checked ~ .cs_description > label > .cs_descr {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}
/* /calculate autoplay *//* hide description & bullets on mobile devices */
@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;
}
}
#rt-showcase.slider-container { background: #F5F6F8; }
.slider-container {
padding-top: 20px;
}
.slider-container .csslider1 {
position: relative;
display: block;
margin: 0 auto !important;
}
</style>
</head>
<body>
<div id="rt-page-surround">
<!-- slider -->
<section id="rt-showcase-surround">
<div id="rt-showcase" class="slider-container rt-overlay-dark">
<div class="rt-container slider-container">
<div class="rt-grid-12 rt-alpha rt-omega">
<div class="csslider1 autoplay cs_handle" style="top:-5px;">
<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_slide1_3" 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_0" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_3" type="radio" class="cs_anchor pause">
<ul>
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">
<img src="http://img.dummy-image-generator.com/abstract/dummy-960x360-Glass.jpg" style="width: 100%;">
</div>
<li class="num0 img">
<img src="http://img.dummy-image-generator.com/abstract/dummy-960x360-Glass.jpg" alt="CSS3 all images appearing slideshow example test questions" title="Hyundai i20">
</li>
<li class="num1 img">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395494_1280.jpg" alt="jQuery vertical em embedphoto behind" title="CitroΓ«n DS3 WRC">
</li>
<li class="num2 img">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395516_1280.jpg" alt="HTML5 full screen iphone thumbnail with images" title="Volkswagen Polo R WRC">
</li>
<li class="num3 img">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395899_1280.jpg" alt="HTML continuous with controls download photo" title="Ε koda Fabia Super 2000">
</li>
</ul>
<a class="cs_lnk" href="http://cssslider.com">HTML5 image carousel</a>
<div class="cs_description">
<label class="num0">
<span class="cs_title"><span class="cs_wrapper">Hyundai i20</span></span>
<br><span class="cs_descr"><span class="cs_wrapper">World rally championship</span></span>
</label>
<label class="num1">
<span class="cs_title"><span class="cs_wrapper">CitroΓ«n DS3 WRC</span></span>
<br><span class="cs_descr"><span class="cs_wrapper">SΓ©bastien Loeb</span></span>
</label>
<label class="num2">
<span class="cs_title"><span class="cs_wrapper">Volkswagen Polo R WRC</span></span>
<br><span class="cs_descr"><span class="cs_wrapper">SΓ©bastien Ogier</span></span>
</label>
<label class="num3">
<span class="cs_title"><span class="cs_wrapper">Ε koda Fabia Super 2000</span></span>
<br><span class="cs_descr"><span class="cs_wrapper">Jan KopeckΓ½</span></span>
</label>
</div>
<div class="cs_play_pause">
<label class="cs_play" for="cs_play1"><span><i></i></span></label>
<label class="cs_pause num0" for="cs_pause1_0"><span><i></i></span></label>
<label class="cs_pause num1" for="cs_pause1_1"><span><i></i></span></label>
<label class="cs_pause num2" for="cs_pause1_2"><span><i></i></span></label>
<label class="cs_pause num3" for="cs_pause1_3"><span><i></i></span></label>
</div>
<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"><span><i></i></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i></span></label>
<label class="num3" for="cs_slide1_3"><span><i></i></span></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"><span><i></i></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i></span></label>
<label class="num3" for="cs_slide1_3"><span><i></i></span></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://img.dummy-image-generator.com/abstract/dummy-128x48-Glass.jpg" alt="HTML template fullscreen download responsive" title="Hyundai i20"></span>
</label>
<label class="num1" for="cs_slide1_1">
<span class="cs_point"></span>
<span class="cs_thumb">
<img src="http://cssslider.com/sliders/demo-7/data1/tooltips/rally395494_1280.jpg" alt="Bootstrap buttons zoom control slider mobile ie disable" title="CitroΓ«n DS3 WRC"></span>
</label>
<label class="num2" for="cs_slide1_2">
<span class="cs_point"></span>
<span class="cs_thumb">
<img src="http://cssslider.com/sliders/demo-7/data1/tooltips/rally395516_1280.jpg" alt="Responsive banner with video slider vertical with gallery" title="Volkswagen Polo R WRC"></span>
</label>
<label class="num3" for="cs_slide1_3">
<span class="cs_point"></span>
<span class="cs_thumb">
<img src="http://cssslider.com/sliders/demo-7/data1/tooltips/rally395899_1280.jpg" alt="jQuery image div text slider text example download" title="Ε koda Fabia Super 2000"></span>
</label>
</div>
<div class="cs_gestures"><div><img src="http://cssslider.com/sliders/demo-7/data1/images/rally395899_1280.jpg" alt="HTML continuous with controls download photo" title="Ε koda Fabia Super 2000" class="cs_first_img">
<img src="http://img.dummy-image-generator.com/abstract/dummy-960x360-Glass.jpg" alt="CSS3 all images appearing slideshow example test questions" title="Hyundai i20">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395494_1280.jpg" alt="jQuery vertical em embedphoto behind" title="CitroΓ«n DS3 WRC">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395516_1280.jpg" alt="HTML5 full screen iphone thumbnail with images" title="Volkswagen Polo R WRC">
<img src="http://cssslider.com/sliders/demo-7/data1/images/rally395899_1280.jpg" alt="HTML continuous with controls download photo" title="Ε koda Fabia Super 2000">
<img src="http://img.dummy-image-generator.com/abstract/dummy-960x360-Glass.jpg" alt="CSS3 all images appearing slideshow example test questions" title="Hyundai i20" class="cs_last_img">
</div></div></div>
</div>
<div class="clear"></div>
</div>
</div>
</section>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
READ MORE
https://owlcarousel2.github.io/OwlCarousel2/demos/autoplay.html
OR USE THIS CODE
<div class="owl-carousel owl-theme"> <img src="https://picsum.photos/300/150?random=1"> <img src="https://picsum.photos/300/150?random=2"> <img src="https://picsum.photos/300/150?random=3"> <img src="https://picsum.photos/300/150?random=4"> <img src="https://picsum.photos/300/150?random=5"> <img src="https://picsum.photos/300/150?random=6"> <img src="https://picsum.photos/300/150?random=7"> <img src="https://picsum.photos/300/150?random=8"> <img src="https://picsum.photos/300/150?random=9"> <img src="https://picsum.photos/300/150?random=10"> <img src="https://picsum.photos/300/150?random=11"> <img src="https://picsum.photos/300/150?random=12"> </div>OR USE THIS CODE
--------------------------------------------------------------------------------------------------------------
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css"> <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> πΉπΌπ½πβ βπΌπΈπ» πΈβπ» πΈπ½ππΌβ βπΌπΈπ» ππΈπΎ βππ»πΌ <section id="demos"> <div class="row"> <div class="large-12 columns"> <div class="owl-carousel owl-theme"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <a class="button secondary play">Play</a> <a class="button secondary stop">Stop</a> <script> $(document).ready(function() { var owl = $('.owl-carousel'); owl.owlCarousel({ items: 4, loop: true, margin: 10, autoplay: true, autoplayTimeout: 1000, autoplayHoverPause: true }); $('.play').on('click', function() { owl.trigger('play.owl.autoplay', [1000]) }) $('.stop').on('click', function() { owl.trigger('stop.owl.autoplay') }) }) </script> </div> </div> </section>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment