# 時代雜誌(切版筆記)(輪播)
## **這次實做主要是運用CSS選擇器 ~ 來操作, 所以需要搭配特定的HTML結構**


**Html結構**


1. 使用input type="radio", 四個input radio中的屬性name記得要一樣才會配判定為同一組, 每一個radio的id屬性則對應到 label中的for屬性作綁定, 意思是點擊到label會匹配到對應的input

2. HTML 結構讓 input radio 寫在前面 再用選擇器 ~ 來選擇後面的元素 e.x. input[type="radio"]:checked ~ .slide

3. 將li 合併成橫向排列

      .slide:nth-of-type(1) { left: 0; }
    
      .slide:nth-of-type(2) { left: 100%; }
      
      .slide:nth-of-type(3) { left: 200%; }
      
      .slide:nth-of-type(4) { left: 300%; }

4. 選擇第n個radio被checked時, 位移相對應的數值

 input[type="radio"]:nth-of-type(1) ~ .slide{
   transform:translatex(0%);
 }
 input[type="radio"]:nth-of-type(2) ~ .slide{
   transform:translatex(-100%);
 }
 input[type="radio"]:nth-of-type(3) ~ .slide{
   transform:translatex(-200%);
 }
 input[type="radio"]:nth-of-type(4) ~ .slide{
   transform:translatex(-300%);
 }

5. 除了控制輪播內容外, 第n個radio被checked後, 繼續利用選擇器 ~ 來選擇control-visible內的label, 改變其樣式

  input[type="radio"]:nth-of-type(1):checked ~ .control-visible label:nth-of-type(1) {
    background-color: #000;
  }

*p.s. 選擇器太長了show一個就好*

6. 最後在 .slide 加上過場效果, 並將radio隱藏(display:none;)。
`transition: .5s transform ease-in-out;`

[作品連結](https://danielgg1024.github.io/time/)