Resim değişmemektedir Bu şuna benzer

Question

: https://gyazo.com/c56735687c7be879ddc2d544e1cd921d

farklı bir düğmesi/radyo tıklandığında resmi değiştirmek için çalışıyor, ama şimdiye kadar olmamıştır çalışıyorum . Bunun sadece css/html ile yapılabileceği söylendi, ben de onu takip etmeye çalıştım ama başarısız oldu.

Bu benim kod jsfiddle üzerindedir: https://jsfiddle.net/4keh0uos/1/

<div class = "fb featured_box1"> 
       <input type = "radio" class = "radiobox" id = "slider1" name ="fpslider"  checked> 
       <input type = "radio" class = "radiobox" id = "slider2" name ="fpslider" > 
       <input type = "radio" class = "radiobox" id = "slider3" name ="fpslider"> 
       <input type = "radio" class = "radiobox" id = "slider4" name ="fpslider"> 

      <div class = "picsliders"> 
       <div id = "picslider1"> 
        <a href = "#"><img src = "arsz_goblin.jpg" alt = ""/></a> 
       </div> 
       <div id = "picslider2"> 
        <a href = "#"><img src = "arsz_hearthstone-wallpaper.jpg" alt = ""/> </a> 
       </div> 
      </div> 

CSS:

.radiobox{ 
position: absolute; 
bottom: 8px; 
left: 50%; 
margin-left: -49.5px; 
z-index: 55; 
} 
#slider1{ 
    /*Inherit from radio box, so there is nothing to write */ 
} 

#slider2{ 
    position: absolute; 
    bottom: 8px; 
    left: 52%; 
} 

Yanlış yaptığım Herhangi bir fikir?

Answer 1

display: none ve display: block numaralı sayfaları kullanmanızı tavsiye etmeme rağmen, opacity: 0 numaralı bir slaytın varsayılan durumunu oluşturmayı unutmuşsunuzdur.

Kemanınızın güncelleştirilmiş sürümü: https://jsfiddle.net/fadil/6jnnq1fp/