私は、同じスライダごとに独立したコントロールを持ったナビゲーションのために同じドキュメント/ページ上の別の純粋なCSSスライダ内で動作するように1つの純粋なCSSスライダ（http://jsfiddle.net/trN4p/1/）を取得しようとしています。ここで 純粋なCSSスライダー
は、問題の例である： http://jsfiddle.net/J6htH/4/
私は内側（CHILD）スライダは独立のと一緒に仕事をしたいの外側（親）スライダー（/アウト紛争ワット）。
2つのスライダーを分離して、リスト項目（およびハッシュタグ）をスライダーに関連して操作し、ページ/ドミノ全体ではなく操作する方法があるのだろうか？いくつかありますかjQuery/Ajax魔法またはJSテンプレート（バックボーン/アンダースコア）トリックはこれを行うには？
私は（純粋なCSSで本当にクールなものを作るのがどれくらいすばらしいのか理解しているので）嫌いですが、JavaScriptを使うべきです。ここで私と一緒に
クマ、あなたは私が不合理であることだと感じたら、コメント：
あなたが唯一のハッシュタグを持つことができるので、あなたが持つことができ、最大でので、あなたは唯一、:targetとしてマッチしています単一の要素を持つことができますスライダーを一度に特定の項目に設定します（もう一方はデフォルトに戻ります）。これはあなたが好きかどうかに関わらず、制約条件です。
一方、HTML + CSS + JSは、Model-View-Controllerパターン/モデル/コンセプトの素晴らしい例です。それが含まれているように、すべてのdata
Viewで含まれているよう
Modelあるすべてのそれは定義としてstylesControllerでどのように相互にuser、データとスタイルinteract 。ユーザーの操作が必要なスライダーを作成しようとしています。 （clickのような）トリガーイベントは、ではなく、Controllerによって実際に処理されます。
TL; DR：
はあなたが純粋 CSSで記述しているものを行うことはできません。
お返事ありがとうございます。私はそれが当てはまらないことを望んでいた。 jsfiddleの外でコードを実行すると（ローカルの。htmlファイル）を参照すると、内側（赤色）のスライダで次へをクリックしてページを更新すると、内側（赤色）スライダのみを制御できるようになります。私は、リスト項目（およびハッシュタグ）がスライダに相対して動作するように、2つのスライダを分離する方法があるのかどうか疑問に思っていました。いくつかのjQuery/AjaxマジックやJSテンプレート（バックボーン/アンダースコア）のトリックがありますか？ – Steve
+1いい回答です。私はあなたのUX/MVCの類推がとても好きです。 – Dan
答えに大きな説明をいただきありがとうございます。 – Steve
.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
ありがとうジョニー。 CSSだけを使ってJSスライダを簡単に置き換えることができます。 :) – Steve