라디오 버튼에 연결된 순수한 CSS 슬라이더

Question

JavaScript가없는 네이티브 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 때문에 그럴 수 없어 라디오 버튼을 숨길 수 있기 때문에 단순히 오버플로를 숨 깁니다.

일반 HTML 버튼 그룹과 동일한 구성 요소를 표시하거나 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>