Pure css slider

Question

Pure css slider

I am trying to get one clean css slider ( http://jsfiddle.net/trN4p/1/ ) to work in another clean css slide on the same document / page using :target for independent navigation for each slider.

Here is an example of a problem: http://jsfiddle.net/J6htH/4/

I want the internal (BABY) slider to work independently of and (out of context) the external (PARENT) slider.

I was wondering if there is a way to separate the two sliders so that their list items (and hash tags) work relative to the slider and not the whole / dom page? Is there jQuery / Ajax magic or JS templating (backbone / underscore) for this?

+4

jquery html css underscore.js backbone.js

Steve Aug 10 '11 at 0:58

source share

3 answers

 .csslider1 { display: inline-block; position: relative; max-width: 830px; 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 > div { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .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.num2, .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .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.num0, .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-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; } } @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 { -webkit-animation: arrow 12300ms infinite -1000ms; -moz-animation: arrow 12300ms infinite -1000ms; animation: arrow 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 12300ms infinite 3100ms; -moz-animation: arrow 12300ms infinite 3100ms; animation: arrow 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 12300ms infinite 7200ms; -moz-animation: arrow 12300ms infinite 7200ms; animation: arrow 12300ms infinite 7200ms; } .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; } .csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .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: -55px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; } .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_handle.cs_grab { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move; } .csslider1 > ul > li.num0 { left: 0%; } .csslider1 > ul > li.num1 { left: 100%; } .csslider1 > ul > li.num2 { left: 200%; } .csslider1 > #cs_slide1_0:checked ~ ul > li, .csslider1 > #cs_pause1_0:checked ~ ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > li, .csslider1 > #cs_pause1_1:checked ~ ul > li { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > li, .csslider1 > #cs_pause1_2:checked ~ ul > li { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > ul > li { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 1000ms; -moz-transition: -moz-transform 1000ms; transition: transform 1000ms; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide { 0%, 25.203252032520325% { -webkit-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); } } @-moz-keyframes slide { 0%, 25.203252032520325% { -moz-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); } } @keyframes slide { 0%, 25.203252032520325% { transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { transform: translateX(-200%); } } .csslider1 > #cs_play1:checked ~ ul > li { -webkit-animation: slide 12300ms infinite; -moz-animation: slide 12300ms infinite; animation: slide 12300ms infinite; } .csslider1 > #cs_play1:checked ~ ul > li, .csslider1 > .pause:checked ~ ul > li { -webkit-transition: none; -moz-transition: none; transition: none; } /* /calculate autoplay */ .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { top: 0; bottom: 0; width: 15%; opacity: .5; } .csslider1 > .cs_arrowprev:hover, .csslider1 > .cs_arrownext:hover { opacity: .9; } .csslider1 > .cs_arrowprev { left: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrownext { right: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { top: 0; left: 0; bottom: 0; width: 100%; } .csslider1 > .cs_arrowprev > label span, .csslider1 > .cs_arrownext > label span { display: block; position: absolute; width: 100%; height: 100%; } .csslider1 > .cs_arrowprev > label span { float: left; } .csslider1 > .cs_arrownext > label span { float: right; } .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { display: block; position: absolute; width: 30px; height:30px; top: 50%; margin-top: -23px; color: #fff; text-align: center; content:''; } .csslider1 > .cs_arrowprev > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png'); background-size:100% auto; } .csslider1 > .cs_arrownext > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png'); background-size:100% auto; } .csslider1 > .cs_bullets { bottom: 20px; width: 70%; left: 15%; } .csslider1 > .cs_bullets > label { margin: 0 2px; padding: 5px; border-radius: 50%; background: transparent; -webkit-box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #fff; margin-top: -13px; -webkit-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -5px; bottom: -10px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { opacity: 1; visibility: visible; } .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 { background: #fff; padding: 6px; -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes bullet { 0%, 33.32333333333334% { -webkit-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -webkit-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @-moz-keyframes bullet { 0%, 33.32333333333334% { -moz-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -moz-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @keyframes bullet { 0%, 33.32333333333334% { box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 { -webkit-animation: bullet 12300ms infinite -1000ms; -moz-animation: bullet 12300ms infinite -1000ms; animation: bullet 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 { -webkit-animation: bullet 12300ms infinite 3100ms; -moz-animation: bullet 12300ms infinite 3100ms; animation: bullet 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 { -webkit-animation: bullet 12300ms infinite 7200ms; -moz-animation: bullet 12300ms infinite 7200ms; animation: bullet 12300ms infinite 7200ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; -moz-transition: none; transition: none; } .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* ------------- Play ------------- */ .csslider1 > .cs_play_pause{display:block;} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; right: 0; z-index: 5; } .csslider1 > .cs_play_pause > label { 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; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite -1900ms; animation: pauseChange 10800ms infinite -1900ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;} .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 1700ms; animation: pauseChange 10800ms infinite 1700ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 5300ms; animation: pauseChange 10800ms infinite 5300ms; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- Play Pause CSS ------------- */ .csslider1{position:relative} .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{ display: block; background: rgba(0,0,0,0.5); z-index: 5; color: #fff; padding: 5px; font-family: arial; font-size: 9px; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; z-index: 5; margin-right: 0; z-index: 111; } / png; base64, iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J / AAAABGdBTUEAALGPC / xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA / 4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT / v / n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe / tTRGCGogLk02tFctiW / SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII ="), move; .csslider1 { display: inline-block; position: relative; max-width: 830px; 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 > div { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .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.num2, .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .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.num0, .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-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; } } @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 { -webkit-animation: arrow 12300ms infinite -1000ms; -moz-animation: arrow 12300ms infinite -1000ms; animation: arrow 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 12300ms infinite 3100ms; -moz-animation: arrow 12300ms infinite 3100ms; animation: arrow 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 12300ms infinite 7200ms; -moz-animation: arrow 12300ms infinite 7200ms; animation: arrow 12300ms infinite 7200ms; } .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; } .csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .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: -55px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; } .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_handle.cs_grab { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move; } .csslider1 > ul > li.num0 { left: 0%; } .csslider1 > ul > li.num1 { left: 100%; } .csslider1 > ul > li.num2 { left: 200%; } .csslider1 > #cs_slide1_0:checked ~ ul > li, .csslider1 > #cs_pause1_0:checked ~ ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > li, .csslider1 > #cs_pause1_1:checked ~ ul > li { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > li, .csslider1 > #cs_pause1_2:checked ~ ul > li { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > ul > li { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 1000ms; -moz-transition: -moz-transform 1000ms; transition: transform 1000ms; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide { 0%, 25.203252032520325% { -webkit-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); } } @-moz-keyframes slide { 0%, 25.203252032520325% { -moz-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); } } @keyframes slide { 0%, 25.203252032520325% { transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { transform: translateX(-200%); } } .csslider1 > #cs_play1:checked ~ ul > li { -webkit-animation: slide 12300ms infinite; -moz-animation: slide 12300ms infinite; animation: slide 12300ms infinite; } .csslider1 > #cs_play1:checked ~ ul > li, .csslider1 > .pause:checked ~ ul > li { -webkit-transition: none; -moz-transition: none; transition: none; } /* /calculate autoplay */ .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { top: 0; bottom: 0; width: 15%; opacity: .5; } .csslider1 > .cs_arrowprev:hover, .csslider1 > .cs_arrownext:hover { opacity: .9; } .csslider1 > .cs_arrowprev { left: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrownext { right: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { top: 0; left: 0; bottom: 0; width: 100%; } .csslider1 > .cs_arrowprev > label span, .csslider1 > .cs_arrownext > label span { display: block; position: absolute; width: 100%; height: 100%; } .csslider1 > .cs_arrowprev > label span { float: left; } .csslider1 > .cs_arrownext > label span { float: right; } .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { display: block; position: absolute; width: 30px; height:30px; top: 50%; margin-top: -23px; color: #fff; text-align: center; content:''; } .csslider1 > .cs_arrowprev > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png'); background-size:100% auto; } .csslider1 > .cs_arrownext > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png'); background-size:100% auto; } .csslider1 > .cs_bullets { bottom: 20px; width: 70%; left: 15%; } .csslider1 > .cs_bullets > label { margin: 0 2px; padding: 5px; border-radius: 50%; background: transparent; -webkit-box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #fff; margin-top: -13px; -webkit-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -5px; bottom: -10px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { opacity: 1; visibility: visible; } .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 { background: #fff; padding: 6px; -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes bullet { 0%, 33.32333333333334% { -webkit-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -webkit-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @-moz-keyframes bullet { 0%, 33.32333333333334% { -moz-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -moz-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @keyframes bullet { 0%, 33.32333333333334% { box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 { -webkit-animation: bullet 12300ms infinite -1000ms; -moz-animation: bullet 12300ms infinite -1000ms; animation: bullet 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 { -webkit-animation: bullet 12300ms infinite 3100ms; -moz-animation: bullet 12300ms infinite 3100ms; animation: bullet 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 { -webkit-animation: bullet 12300ms infinite 7200ms; -moz-animation: bullet 12300ms infinite 7200ms; animation: bullet 12300ms infinite 7200ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; -moz-transition: none; transition: none; } .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* ------------- Play ------------- */ .csslider1 > .cs_play_pause{display:block;} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; right: 0; z-index: 5; } .csslider1 > .cs_play_pause > label { 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; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite -1900ms; animation: pauseChange 10800ms infinite -1900ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;} .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 1700ms; animation: pauseChange 10800ms infinite 1700ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 5300ms; animation: pauseChange 10800ms infinite 5300ms; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- Play Pause CSS ------------- */ .csslider1{position:relative} .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{ display: block; background: rgba(0,0,0,0.5); z-index: 5; color: #fff; padding: 5px; font-family: arial; font-size: 9px; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; z-index: 5; margin-right: 0; z-index: 111; } / png; base64, iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J / AAAABGdBTUEAALGPC / xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA / 4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9 / 5TpJ + xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh + oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf + sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg =="), move; .csslider1 { display: inline-block; position: relative; max-width: 830px; 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 > div { width: 100%; visibility: hidden; font-size: 0px; line-height: 0; } .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.num2, .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2, .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.num0, .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 { opacity: 1; z-index: 5; } @-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; } } @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 { -webkit-animation: arrow 12300ms infinite -1000ms; -moz-animation: arrow 12300ms infinite -1000ms; animation: arrow 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 { -webkit-animation: arrow 12300ms infinite 3100ms; -moz-animation: arrow 12300ms infinite 3100ms; animation: arrow 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1, .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 { -webkit-animation: arrow 12300ms infinite 7200ms; -moz-animation: arrow 12300ms infinite 7200ms; animation: arrow 12300ms infinite 7200ms; } .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; } .csslider1 > .cs_bullets { position: absolute; left: 0; width: 100%; z-index: 6; font-size: 0; line-height: 8pt; text-align: center; } .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: -55px; top: -48px; } .csslider1 > .cs_bullets > label > .cs_thumb > img { max-width: none; } .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_handle.cs_grab { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move; } .csslider1 > ul > li.num0 { left: 0%; } .csslider1 > ul > li.num1 { left: 100%; } .csslider1 > ul > li.num2 { left: 200%; } .csslider1 > #cs_slide1_0:checked ~ ul > li, .csslider1 > #cs_pause1_0:checked ~ ul > li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } .csslider1 > #cs_slide1_1:checked ~ ul > li, .csslider1 > #cs_pause1_1:checked ~ ul > li { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } .csslider1 > #cs_slide1_2:checked ~ ul > li, .csslider1 > #cs_pause1_2:checked ~ ul > li { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); transform: translateX(-200%); } .csslider1 > ul > li { position: absolute; top: 0; left: 0; display: inline-block; opacity: 1; -webkit-transition: -webkit-transform 1000ms; -moz-transition: -moz-transform 1000ms; transition: transform 1000ms; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } @-webkit-keyframes slide { 0%, 25.203252032520325% { -webkit-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); } } @-moz-keyframes slide { 0%, 25.203252032520325% { -moz-transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); } } @keyframes slide { 0%, 25.203252032520325% { transform: translateX(0%); } 33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); } 66.66666666666667%, 91.869918699187% { transform: translateX(-200%); } } .csslider1 > #cs_play1:checked ~ ul > li { -webkit-animation: slide 12300ms infinite; -moz-animation: slide 12300ms infinite; animation: slide 12300ms infinite; } .csslider1 > #cs_play1:checked ~ ul > li, .csslider1 > .pause:checked ~ ul > li { -webkit-transition: none; -moz-transition: none; transition: none; } /* /calculate autoplay */ .csslider1 > .cs_arrowprev, .csslider1 > .cs_arrownext { top: 0; bottom: 0; width: 15%; opacity: .5; } .csslider1 > .cs_arrowprev:hover, .csslider1 > .cs_arrownext:hover { opacity: .9; } .csslider1 > .cs_arrowprev { left: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrownext { right: 0; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; } .csslider1 > .cs_arrowprev > label, .csslider1 > .cs_arrownext > label { top: 0; left: 0; bottom: 0; width: 100%; } .csslider1 > .cs_arrowprev > label span, .csslider1 > .cs_arrownext > label span { display: block; position: absolute; width: 100%; height: 100%; } .csslider1 > .cs_arrowprev > label span { float: left; } .csslider1 > .cs_arrownext > label span { float: right; } .csslider1 > .cs_arrowprev > label span:after, .csslider1 > .cs_arrownext > label span:after { display: block; position: absolute; width: 30px; height:30px; top: 50%; margin-top: -23px; color: #fff; text-align: center; content:''; } .csslider1 > .cs_arrowprev > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png'); background-size:100% auto; } .csslider1 > .cs_arrownext > label span:after { background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png'); background-size:100% auto; } .csslider1 > .cs_bullets { bottom: 20px; width: 70%; left: 15%; } .csslider1 > .cs_bullets > label { margin: 0 2px; padding: 5px; border-radius: 50%; background: transparent; -webkit-box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px #fff; } .csslider1 > .cs_bullets > label > .cs_thumb { border: 3px solid #fff; margin-top: -13px; -webkit-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .csslider1 > .cs_bullets > label > .cs_thumb:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; margin-left: -5px; bottom: -10px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #fff; } .csslider1 > .cs_bullets > label:hover > .cs_thumb { opacity: 1; visibility: visible; } .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 { background: #fff; padding: 6px; -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes bullet { 0%, 33.32333333333334% { -webkit-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -webkit-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @-moz-keyframes bullet { 0%, 33.32333333333334% { -moz-box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { -moz-box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } @keyframes bullet { 0%, 33.32333333333334% { box-shadow: none; background: #fff; padding: 6px; } 33.333333333333336%, 100% { box-shadow: inset 0 0 0 1px #fff; background: transparent; padding: 5px; margin-bottom: 0; } } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 { -webkit-animation: bullet 12300ms infinite -1000ms; -moz-animation: bullet 12300ms infinite -1000ms; animation: bullet 12300ms infinite -1000ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 { -webkit-animation: bullet 12300ms infinite 3100ms; -moz-animation: bullet 12300ms infinite 3100ms; animation: bullet 12300ms infinite 3100ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 { -webkit-animation: bullet 12300ms infinite 7200ms; -moz-animation: bullet 12300ms infinite 7200ms; animation: bullet 12300ms infinite 7200ms; } .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-transition: none; -moz-transition: none; transition: none; } .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point, .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } /* ------------- Play ------------- */ .csslider1 > .cs_play_pause{display:block;} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; right: 0; z-index: 5; } .csslider1 > .cs_play_pause > label { 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; } @-webkit-keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } @keyframes pauseChange { 0%, 33.32333333333334% { opacity: 1; z-index: 5; } 33.333333333333336%, 100% { opacity: 0; z-index: -1; } } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite -1900ms; animation: pauseChange 10800ms infinite -1900ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;} .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 1700ms; animation: pauseChange 10800ms infinite 1700ms; } .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 { opacity: 0; z-index: -1; -webkit-animation: pauseChange 10800ms infinite 5300ms; animation: pauseChange 10800ms infinite 5300ms; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause, .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause { -webkit-animation: none; animation: none; } /* ------------- Play Pause CSS ------------- */ .csslider1{position:relative} .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{ display: block; background: rgba(0,0,0,0.5); z-index: 5; color: #fff; padding: 5px; font-family: arial; font-size: 9px; } .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);} .csslider1 > .cs_play_pause { position: absolute; bottom: 0; z-index: 5; margin-right: 0; z-index: 111; }

 <div class="csslider1 autoplay cs_handle" style="width:200px;"> <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_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"> <ul> <div> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" style="width: 100%;"> </div> <li class="num0 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" alt="" title=""> </a> </li> <li class="num1 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163167.png" alt="" title=""> </a> </li> <li class="num2 img"> <a href="http://betaout.com" target="_blank"> <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163189.png" alt="" title=""> </a> </li> </ul> <div class="cs_play_pause"> <label class="cs_play" for="cs_play1">Play</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> </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> </div> <div class="cs_bullets"> <label class="num0" for="cs_slide1_0"> <span class="cs_point"></span> </label> <label class="num1" for="cs_slide1_1"> <span class="cs_point"></span> </label> <label class="num2" for="cs_slide1_2"> <span class="cs_point"></span> </label> </div> </div>

Check out this link for CSS carousel with Autoplay and Pause functions - blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html

+1

Puneet sharma Feb 11 '16 at 12:13

source share

I know only one slider, but it is part of the website creator. Here you can see the demo link: https://mobirise.com/extensions/wowslider/?utm_source=extension_list&utm_medium=program&utm_campaign=win_4.8.8

If you want to use the slider, you can create it in the project, and then take the code and paste it into your own site.

0

John mill Dec 6 '18 at 12:12

source share

zzzzBov · Accepted Answer · 2011-08-10T02:43:39+0000

I'm sorry to say this (because I understand how amazing it is to do really cool things in pure CSS), but you have to use JavaScript.

Bear with me here and comment if you feel like I'm unfounded:

You can only have one element that matches like :target , because you can only have one hashtag, so in most cases you can have one slider set for a specific element at a time (others will return to default). This is a limitation, whether you like it or not.

HTML + CSS + JS, on the other hand, is a great example of a Model-View-Controller model / model / concept.

HTML is Model because it contains all the data
CSS is a View as it contains all styles
JS is a Controller because it defines how user , data, and styles interact with each other.

You are trying to create a slider that includes user interaction. Triggering events (like click ) should really be handled by the Controller , not View .

TL; DR:

You cannot do what you describe in pure CSS.

Pure css slider

More articles: