ラジオボタンにリンクされた純粋なCSSスライダ

Question

クリック可能なスライダを作成する方法があるかどうかは、ネイティブCSSを使用するだけで、ラジオボタンでさらに制御できます。

スライダーがこの

のようになります。私はに関するラジオボタンのラベルに画像を置くと思ったが、比較的全体ラジオ・グループ・コンテナのラッパーにそれらを配置し、その後に正または負のマージンを追加どのラジオボタンが:checkedであるかに応じて画像が表示されます。

これは私がこれまでに得たものである：

.carousel__nav { 
 
    display: flex; 
 
} 
 
.mwf-option label img { 
 
    width: 182px; 
 
    height: 95px; 
 
} 
 
.style-2 .mwf-option { 
 
    margin-top: 100px; 
 
} 
 
.style-2 .carousel__nav label.btn { 
 
    position: absolute; 
 
    top: 0; 
 
    padding: 0; 
 
    transition: 1s; 
 
} 
 
.style-2 .mwf-option:nth-child(1) label.btn { 
 
    left: calc(182px * 1); 
 
} 
 
.style-2 .mwf-option:nth-child(2) label.btn { 
 
    left: calc(182px * 2); 
 
} 
 
.style-2 .mwf-option:nth-child(3) label.btn { 
 
    left: calc(182px * 3); 
 
} 
 
.style-2 .mwf-option:nth-child(1) .mwf-radio:checked ~ label.btn { 
 
    margin-left: 182px; 
 
} 
 
.style-2 .mwf-option:nth-child(3) .mwf-radio:checked ~ label.btn { 
 
    margin-left: -182px; 
 
}

<div class="carousel__wrapper style-2"> 
 
      <div class="carousel__nav"> 
 
      <span class="mwf-option"> 
 
       <input type="radio" id="radio1" name="radio-group" class="mwf-radio input-hidden"> 
 
       <label for="radio1" class="btn"> 
 
       <div class="VueCarousel-slide"><img id="slide-1" src="https://i.imgur.com/OhXJ7rk.jpg"> 
 
       </div> 
 
       </label> 
 
       <span class="btn">One</span> 
 
      </span> 
 
      <span class="mwf-option"> 
 
       <input type="radio" id="radio2" name="radio-group" class="mwf-radio input-hidden"> 
 
       <label for="radio2" class="btn"> 
 
       <div class="VueCarousel-slide"><img id="slide-2" src="https://i.imgur.com/6wxbv7n.jpg"> 
 
       </div> 
 
       </label> 
 
       <span class="btn">Two</span> 
 
      </span> 
 
      <span class="mwf-option"> 
 
       <input type="radio" id="radio3" name="radio-group" class="mwf-radio input-hidden" value="mwf7_2566_666"> 
 
       <label for="radio3" class="btn"> 
 
       <div class="VueCarousel-slide"><img id="slide-3" src="https://i.imgur.com/Cc0BzB8.jpg"> 
 
       </div> 
 
       </label> 
 
       <span class="btn">Three</span> 
 
      </span> 
 
      </div> 
 
     </div>

私がチェックしたラジオボタンに応じて、すべての画像に余白を設定するかどうかはわかりませんので、私は苦労しています。私は現在、CSSの~演算子はを使用していますが、それだけで次のコンポーネントではなく、さらに私は、画像のラッパーにいくつかoverflow: hiddenを追加したいすべての3

に影響を与えますが、その最初の共通のラッパーが.carousel__navあるので、私はできませんラジオボタンも隠すだけでオーバーフローを隠すだけです。

普通のラジオボタングループと同じコンポーネントを表示するか、CSSクラスを変更するだけでスライダーとして表示することができるので、このHTML構造体（）を保持します。

これはCSSを使用するだけで可能ですか、ここにはいくつかのJavaScriptが必要ですか？私はそれを防止したいと思いますが、HTML構造体を維持することは優先度1を持っています。

Answer 1

CSSを使用するだけの主な問題はかなり固いです。あらかじめすべてが明記されていなければならず、スライドの数を変更すると、CSSの束を変更する必要があります。

:root { 
 
    --total-slides: 3; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
[name=slider-group] { 
 
    display: none; 
 
} 
 

 
.slider_container { 
 
    overflow-x: hidden; 
 
} 
 

 
.slider { 
 
    width: calc(var(--total-slides)*100vw); 
 
    font-size: 0; 
 
    transition: transform 600ms ease-in-out; 
 
} 
 

 
.slider_slide { 
 
    width: 100vw; 
 
    height: 140px; 
 
    display: inline-block; 
 
    font-size: 11px; 
 
    background: #f44336; 
 
} 
 

 
.slider_slide:nth-child(even) { 
 
    background: #3F51B5; 
 
} 
 

 
#radio1:checked~.slider { 
 
    transform: translateX(0); 
 
} 
 

 
#radio2:checked~.slider { 
 
    transform: translateX(-100vw); 
 
} 
 

 
#radio3:checked~.slider { 
 
    transform: translateX(-200vw); 
 
} 
 

 
.slider_nav { 
 
    text-align: center; 
 
    background: #37474F; 
 
} 
 

 
.slider_nav .btn { 
 
    background-color: #607D8B; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
}

<div class="slider_container"> 
 
    <input type="radio" name="slider-group" id="radio1" /> 
 
    <input type="radio" name="slider-group" id="radio2" /> 
 
    <input type="radio" name="slider-group" id="radio3" /> 
 
    <div class="slider"> 
 
    <div class="slider_slide"></div> 
 
    <div class="slider_slide"></div> 
 
    <div class="slider_slide"></div> 
 
    </div> 
 
</div> 
 
<nav class="slider_nav"> 
 
    <label class="btn" for="radio1">One</label> 
 
    <label class="btn" for="radio2">Two</label> 
 
    <label class="btn" for="radio3">Three</label> 
 
</nav>