我試圖讓一個純CSS滑塊（http://jsfiddle.net/trN4p/1/）在同一文檔/頁面上的另一個純CSS滑塊內使用:target進行導航，併爲每個滑塊單獨控制。純CSS滑塊
這是問題的一個例子：我想裏面（兒童）滑塊獨立的和一起工作http://jsfiddle.net/J6htH/4/
（瓦特/出衝突）外（父）滑塊。
我想知道是否有辦法分離兩個滑塊，以便他們的列表項（和哈希標籤）相對於滑塊而不是整個頁面/ dom操作？是否有一些jQuery/Ajax魔術或JS模板（骨幹/下劃線）技巧要做到這一點？
我討厭這麼說（因爲我理解在純CSS中製作非常酷的東西感覺有多棒），但是您應該使用JavaScript。
熊與我在這裏，如果你覺得我是不合理的評論：
只能具有的選擇相匹配的:target一個單一的元素，因爲你只能有一個主題標籤，所以最多可以有其中一個滑塊一次設置爲特定項目（另一個將返回到默認值）。無論你喜歡與否，這都是約束條件。
另一方面，HTML + CSS + JS是模型 - 視圖 - 控制器模式/模型/概念的一個很好的例子。
Model，因爲它包含了所有的dataView，因爲它包含了所有的stylesController，因爲它定義如何user，數據和樣式interact相互。您正在嘗試製作涉及用戶交互的滑塊。觸發事件（如click）實際上應該由Controller處理，而不是View。
TL;博士：
你不能做你的純 CSS描述什麼。
.csslider1 {
\t \t display: inline-block;
\t \t position: relative;
\t \t max-width: 830px;
\t \t
\t \t width: 100%;
\t \t margin-top: 10px;
\t }
\t .csslider1 > .cs_anchor {
\t \t display: none;
\t }
\t .csslider1 > ul {
\t \t position: relative;
\t \t z-index: 1;
\t \t font-size: 0;
\t \t line-height: 0;
\t \t margin: 0 auto;
\t \t padding: 0;
\t \t
\t \t overflow: hidden;
\t \t white-space: nowrap;
\t }
\t .csslider1 > ul > div {
\t \t width: 100%;
\t \t visibility: hidden;
\t \t font-size: 0px;
\t \t line-height: 0;
\t }
\t .csslider1 > ul > li.img img {
\t \t width: 100%;
\t }
\t .csslider1 > ul > li.img {
\t \t font-size: 0pt;
\t }
\t .csslider1 > ul > li {
\t \t position: relative;
\t \t display: inline-block;
\t \t width: 100%;
\t \t height: 100%;
\t \t overflow: hidden;
\t \t font-size: 15px;
\t \t font-size: initial;
\t \t line-height: normal;
\t \t white-space: normal;
\t \t vertical-align: top;
\t \t -webkit-box-sizing: border-box;
\t \t -moz-box-sizing: border-box;
\t \t box-sizing: border-box;
\t \t -webkit-transform: translate3d(0,0,0);
\t \t -moz-transform: translate3d(0,0,0);
\t \t -ms-transform: translate3d(0,0,0);
\t \t -o-transform: translate3d(0,0,0);
\t \t transform: translate3d(0,0,0);
\t }
\t .csslider1 .cs_lnk{
\t \t position: absolute;
\t \t top: -9999px;
\t \t left: -9999px;
\t \t font-size: 0pt;
\t \t opacity: 0;
\t \t filter: alpha(opacity=0);
\t }
\t .csslider1 > ul > li.img,
\t .csslider1 > .cs_arrowprev,
\t .csslider1 > .cs_arrownext,
\t .csslider1 > .cs_bullets,
\t .csslider1 > .cs_play_pause {
\t \t -webkit-touch-callout: none;
\t \t -webkit-user-select: none;
\t \t -khtml-user-select: none;
\t \t -moz-user-select: none;
\t \t -ms-user-select: none;
\t \t user-select: none;
\t }.csslider1 > .cs_arrowprev,
\t .csslider1 > .cs_arrownext {
\t \t position: absolute;
\t \t top: 50%;
\t \t -webkit-box-sizing: content-box;
\t \t -moz-box-sizing: content-box;
\t \t box-sizing: content-box;
\t \t z-index: 5;
\t }
\t .csslider1 > .cs_arrowprev > label,
\t .csslider1 > .cs_arrownext > label {
\t \t position: absolute;
\t \t text-decoration: none;
\t \t cursor: pointer;
\t \t opacity: 0;
\t \t z-index: -1;
\t }
\t .csslider1 > .cs_arrowprev {
\t \t left: 0;
\t }
\t .csslider1 > .cs_arrownext {
\t \t right: 0;
\t }
\t .csslider1 > .slide:checked ~ .cs_arrowprev > label,
\t .csslider1 > .slide:checked ~ .cs_arrownext > label {
\t \t opacity: 0;
\t \t z-index: -1;
\t }
\t .csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2,
\t .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2,
\t .csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1,
\t .csslider1 > #cs_pause1_0:checked ~ .cs_arrownext > label.num1,
\t .csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0,
\t .csslider1 > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0,
\t .csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2,
\t .csslider1 > #cs_pause1_1:checked ~ .cs_arrownext > label.num2,
\t .csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1,
\t .csslider1 > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1,
\t .csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0,
\t .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 {
\t \t opacity: 1;
\t \t z-index: 5;
\t }
\t @-webkit-keyframes arrow {
\t \t 0%, 33.32333333333334% { opacity: 1; z-index: 5; }
\t \t 33.333333333333336%, 100% \t { opacity: 0; z-index: -1; }
\t }
\t @-moz-keyframes arrow {
\t \t 0%, 33.32333333333334% { opacity: 1; z-index: 5; }
\t \t 33.333333333333336%, 100% \t { opacity: 0; z-index: -1; }
\t }
\t @keyframes arrow {
\t \t 0%, 33.32333333333334% { opacity: 1; z-index: 5; }
\t \t 33.333333333333336%, 100% \t { opacity: 0; z-index: -1; }
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2,
\t .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1 {
\t \t -webkit-animation: arrow 12300ms infinite -1000ms;
\t \t -moz-animation: arrow 12300ms infinite -1000ms;
\t \t animation: arrow 12300ms infinite -1000ms;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0,
\t .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 {
\t \t -webkit-animation: arrow 12300ms infinite 3100ms;
\t \t -moz-animation: arrow 12300ms infinite 3100ms;
\t \t animation: arrow 12300ms infinite 3100ms;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1,
\t .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 {
\t \t -webkit-animation: arrow 12300ms infinite 7200ms;
\t \t -moz-animation: arrow 12300ms infinite 7200ms;
\t \t animation: arrow 12300ms infinite 7200ms;
\t \t
\t }
\t .csslider1 > .slide:checked ~ .cs_arrowprev > label,
\t .csslider1 > .slide:checked ~ .cs_arrownext > label,
\t .csslider1 > .pause:checked ~ .cs_arrowprev > label,
\t .csslider1 > .pause:checked ~ .cs_arrownext > label {
\t \t -webkit-animation: none;
\t \t -moz-animation: none;
\t \t -ms-animation: none;
\t \t -o-animation: none;
\t \t animation: none;
\t }
\t .csslider1 > .cs_bullets {
\t \t position: absolute;
\t \t left: 0;
\t \t width: 100%;
\t \t z-index: 6;
\t \t font-size: 0;
\t \t line-height: 8pt;
\t \t text-align: center;
\t }
\t .csslider1 > .cs_bullets > div {
\t \t margin-left: -50%;
\t \t width: 100%;
\t }
\t .csslider1 > .cs_bullets > label {
\t \t position: relative;
\t \t display: inline-block;
\t \t cursor: pointer;
\t }
\t .csslider1 > .cs_bullets > label > .cs_thumb {
\t \t visibility: hidden;
\t \t position: absolute;
\t \t opacity: 0;
\t \t z-index: 1;
\t \t line-height: 0;
\t \t left: -55px;
\t \t top: -48px;
\t }
\t .csslider1 > .cs_bullets > label > .cs_thumb > img {
\t \t max-width: none;
\t }
\t .csslider1.cs_handle {
\t \t cursor: -webkit-grab;
\t \t cursor: -moz-grab;
\t \t cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
\t }
\t .csslider1.cs_handle.cs_grab {
\t \t cursor: -webkit-grabbing;
\t \t cursor: -moz-grabbing;
\t \t cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move;
\t }
\t .csslider1 > ul > li.num0 {
\t \t left: 0%;
\t }
\t .csslider1 > ul > li.num1 {
\t \t left: 100%;
\t }
\t .csslider1 > ul > li.num2 {
\t \t left: 200%;
\t }
\t .csslider1 > #cs_slide1_0:checked ~ ul > li,
\t .csslider1 > #cs_pause1_0:checked ~ ul > li {
\t \t -webkit-transform: translateX(0%);
\t \t -moz-transform: translateX(0%);
\t \t transform: translateX(0%);
\t \t
\t }
\t .csslider1 > #cs_slide1_1:checked ~ ul > li,
\t .csslider1 > #cs_pause1_1:checked ~ ul > li {
\t \t -webkit-transform: translateX(-100%);
\t \t -moz-transform: translateX(-100%);
\t \t transform: translateX(-100%);
\t \t
\t }
\t .csslider1 > #cs_slide1_2:checked ~ ul > li,
\t .csslider1 > #cs_pause1_2:checked ~ ul > li {
\t \t -webkit-transform: translateX(-200%);
\t \t -moz-transform: translateX(-200%);
\t \t transform: translateX(-200%);
\t \t
\t }
\t .csslider1 > ul > li {
\t \t position: absolute;
\t \t top: 0;
\t \t left: 0;
\t \t display: inline-block;
\t \t opacity: 1;
\t \t -webkit-transition: -webkit-transform 1000ms;
\t \t -moz-transition: -moz-transform 1000ms;
\t \t transition: transform 1000ms;
\t \t
\t \t
\t \t -webkit-transform: scale(1);
\t \t -moz-transform: scale(1);
\t \t transform: scale(1);
\t \t
\t }
\t
\t @-webkit-keyframes slide {
\t \t 0%, 25.203252032520325% \t { -webkit-transform: translateX(0%); }
\t \t 33.333333333333336%, 58.53658536585366% \t { -webkit-transform: translateX(-100%); }
\t \t 66.66666666666667%, 91.869918699187% \t { -webkit-transform: translateX(-200%); }
\t \t
\t }
\t @-moz-keyframes slide {
\t \t 0%, 25.203252032520325% \t { -moz-transform: translateX(0%); }
\t \t 33.333333333333336%, 58.53658536585366% \t { -moz-transform: translateX(-100%); }
\t \t 66.66666666666667%, 91.869918699187% \t { -moz-transform: translateX(-200%); }
\t \t
\t }
\t @keyframes slide {
\t \t 0%, 25.203252032520325% \t { transform: translateX(0%); }
\t \t 33.333333333333336%, 58.53658536585366% \t { transform: translateX(-100%); }
\t \t 66.66666666666667%, 91.869918699187% \t { transform: translateX(-200%); }
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ ul > li {
\t \t -webkit-animation: slide 12300ms infinite;
\t \t -moz-animation: slide 12300ms infinite;
\t \t animation: slide 12300ms infinite;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ ul > li,
\t .csslider1 > .pause:checked ~ ul > li {
\t \t -webkit-transition: none;
\t \t -moz-transition: none;
\t \t transition: none;
\t \t
\t }
\t /* /calculate autoplay */
\t .csslider1 > .cs_arrowprev,
\t .csslider1 > .cs_arrownext {
\t \t top: 0;
\t \t bottom: 0;
\t \t width: 15%;
\t \t opacity: .5;
\t }
\t .csslider1 > .cs_arrowprev:hover,
\t .csslider1 > .cs_arrownext:hover {
\t \t opacity: .9;
\t }
\t .csslider1 > .cs_arrowprev {
\t \t left: 0;
\t \t background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
\t \t background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
\t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
\t \t background-repeat: repeat-x;
\t }
\t .csslider1 > .cs_arrownext {
\t \t right: 0;
\t \t background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
\t \t background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
\t \t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
\t \t background-repeat: repeat-x;
\t }
\t .csslider1 > .cs_arrowprev > label,
\t .csslider1 > .cs_arrownext > label {
\t \t top: 0;
\t \t left: 0;
\t \t bottom: 0;
\t \t width: 100%;
\t }
\t .csslider1 > .cs_arrowprev > label span,
\t .csslider1 > .cs_arrownext > label span {
\t \t display: block;
\t \t position: absolute;
\t \t width: 100%;
\t \t height: 100%;
\t }
\t .csslider1 > .cs_arrowprev > label span {
\t \t float: left;
\t }
\t .csslider1 > .cs_arrownext > label span {
\t \t float: right;
\t }
\t .csslider1 > .cs_arrowprev > label span:after,
\t .csslider1 > .cs_arrownext > label span:after {
\t \t display: block;
\t \t position: absolute;
\t \t width: 30px;
\t \t height:30px;
\t \t top: 50%;
\t \t margin-top: -23px;
\t \t color: #fff;
\t \t text-align: center;
\t \t content:'';
\t }
\t .csslider1 > .cs_arrowprev > label span:after {
\t background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png');
\t background-size:100% auto;
\t }
\t .csslider1 > .cs_arrownext > label span:after {
\t background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png');
\t \t background-size:100% auto;
\t }
\t .csslider1 > .cs_bullets {
\t \t bottom: 20px;
\t \t width: 70%;
\t \t left: 15%;
\t }
\t .csslider1 > .cs_bullets > label {
\t \t margin: 0 2px;
\t \t padding: 5px;
\t \t border-radius: 50%;
\t \t background: transparent;
\t \t -webkit-box-shadow: inset 0 0 0 1px #fff;
\t \t box-shadow: inset 0 0 0 1px #fff;
\t }
\t .csslider1 > .cs_bullets > label > .cs_thumb {
\t \t border: 3px solid #fff;
\t \t margin-top: -13px;
\t \t -webkit-transition: opacity .3s, visibility .3s;
\t \t -moz-transition: opacity .3s, visibility .3s;
\t \t transition: opacity .3s, visibility .3s;
\t \t
\t }
\t .csslider1 > .cs_bullets > label > .cs_thumb:before {
\t \t content: '';
\t \t position: absolute;
\t \t width: 0;
\t \t height: 0;
\t \t left: 50%;
\t \t margin-left: -5px;
\t \t bottom: -10px;
\t \t border-left: 7px solid transparent;
\t \t border-right: 7px solid transparent;
\t \t
\t \t border-top: 7px solid #fff;
\t }
\t .csslider1 > .cs_bullets > label:hover > .cs_thumb {
\t \t opacity: 1;
\t \t visibility: visible;
\t }
\t .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
\t .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0,
\t .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
\t .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1,
\t .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2,
\t .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 {
\t \t background: #fff;
\t \t padding: 6px;
\t \t -webkit-box-shadow: none;
\t \t box-shadow: none;
\t }
\t @-webkit-keyframes bullet {
\t \t 0%, 33.32333333333334% \t {
\t \t \t -webkit-box-shadow: none;
\t \t \t background: #fff;
\t \t \t padding: 6px;
\t \t }
\t \t 33.333333333333336%, 100% {
\t \t \t -webkit-box-shadow: inset 0 0 0 1px #fff;
\t \t \t background: transparent;
\t \t \t padding: 5px;
\t \t \t margin-bottom: 0;
\t \t }
\t }
\t @-moz-keyframes bullet {
\t \t 0%, 33.32333333333334% \t {
\t \t \t -moz-box-shadow: none;
\t \t \t background: #fff;
\t \t \t padding: 6px;
\t \t }
\t \t 33.333333333333336%, 100% {
\t \t \t -moz-box-shadow: inset 0 0 0 1px #fff;
\t \t \t background: transparent;
\t \t \t padding: 5px;
\t \t \t margin-bottom: 0;
\t \t }
\t }
\t @keyframes bullet {
\t \t 0%, 33.32333333333334% \t {
\t \t \t box-shadow: none;
\t \t \t background: #fff;
\t \t \t padding: 6px;
\t \t }
\t \t 33.333333333333336%, 100% {
\t \t \t box-shadow: inset 0 0 0 1px #fff;
\t \t \t background: transparent;
\t \t \t padding: 5px;
\t \t \t margin-bottom: 0;
\t \t }
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 {
\t \t -webkit-animation: bullet 12300ms infinite -1000ms;
\t \t -moz-animation: bullet 12300ms infinite -1000ms;
\t \t animation: bullet 12300ms infinite -1000ms;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 {
\t \t -webkit-animation: bullet 12300ms infinite 3100ms;
\t \t -moz-animation: bullet 12300ms infinite 3100ms;
\t \t animation: bullet 12300ms infinite 3100ms;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 {
\t \t -webkit-animation: bullet 12300ms infinite 7200ms;
\t \t -moz-animation: bullet 12300ms infinite 7200ms;
\t \t animation: bullet 12300ms infinite 7200ms;
\t \t
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point,
\t .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
\t \t -webkit-transition: none;
\t \t -moz-transition: none;
\t \t transition: none;
\t \t
\t }
\t .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point,
\t .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
\t \t -webkit-animation: none;
\t \t -moz-animation: none;
\t \t -ms-animation: none;
\t \t -o-animation: none;
\t \t animation: none;
\t }
\t
\t /* ------------- Play ------------- */
\t .csslider1 > .cs_play_pause{display:block;}
\t
\t .csslider1 > .cs_play_pause {
\t position: absolute;
\t bottom: 0;
\t right: 0;
\t z-index: 5;
\t }
\t .csslider1 > .cs_play_pause > label {
\t cursor: pointer;
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause,
\t .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play,
\t .csslider1 > .pause:checked ~ .cs_play_pause > .cs_play {
\t display: block;
\t z-index: 5;
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play,
\t .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
\t .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
\t display: none;
\t z-index: -1;
\t }
\t @-webkit-keyframes pauseChange {
\t 0%, 33.32333333333334% { opacity: 1; z-index: 5; }
\t 33.333333333333336%, 100% { opacity: 0; z-index: -1; }
\t }
\t @keyframes pauseChange {
\t 0%, 33.32333333333334% { opacity: 1; z-index: 5; }
\t 33.333333333333336%, 100% { opacity: 0; z-index: -1; }
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 {
\t opacity: 0;
\t z-index: -1;
\t -webkit-animation: pauseChange 10800ms infinite -1900ms;
\t animation: pauseChange 10800ms infinite -1900ms;
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;}
\t
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 {
\t opacity: 0;
\t z-index: -1;
\t -webkit-animation: pauseChange 10800ms infinite 1700ms;
\t animation: pauseChange 10800ms infinite 1700ms;
\t }
\t .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 {
\t opacity: 0;
\t z-index: -1;
\t -webkit-animation: pauseChange 10800ms infinite 5300ms;
\t animation: pauseChange 10800ms infinite 5300ms;
\t }
\t .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
\t .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
\t -webkit-animation: none;
\t animation: none;
\t }
\t /* ------------- Play Pause CSS ------------- */
\t .csslider1{position:relative}
\t .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{
\t display: block;
\t background: rgba(0,0,0,0.5);
\t z-index: 5;
\t color: #fff;
\t padding: 5px;
\t font-family: arial;
\t font-size: 9px;
\t }
\t .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);}
\t .csslider1 > .cs_play_pause {
\t position: absolute;
\t bottom: 0;
\t z-index: 5;
\t margin-right: 0;
\t z-index: 111;
\t }<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>
\t <div class="cs_play_pause">
\t \t <label class="cs_play" for="cs_play1">Play</label> \t
\t </div>
\t
<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>退房與自動播放此鏈接，CSS和旋轉木馬暫停功能 - blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html
只想說，你的小提琴是真棒！ – Johnny5
謝謝你約翰尼。這是簡單的替換JS滑塊只使用CSS。 :) – Steve