Javascript'siz Slider'da id Sorunu

mali2012

Asistan
Merhabalar. Ben internetten bir slaydır yapımına baktım da; resimlerin görünmesini sağlayamadım. Kodları aşağıda veriyorum.

"slider.php" sayfasının kodları aşağıda

HTML:
<center>

<div id="container">
    <input type="radio" name="icon" id="btn1">
    <input type="radio" name="icon" id="btn2">
    <input type="radio" name="icon" id="btn3">
    <input type="radio" name="icon" id="btn4">


    <img src="images/buyuk-slider/slider.1.jpg" id="img1">
    <img src="images/buyuk-slider/slider.2.jpg" id="img2">
    <img src="images/buyuk-slider/slider.3.jpg" id="img3">
    <img src="images/buyuk-slider/slider.4.jpg" id="img4">

    </div>

</center>

style.css in kodları aşağıda

CSS:
#container {
width: 660px;
height: 520px;
position: relative;
top: 100px;
overflow: hidden;

}


#container img {
width: 0px;
position: absolute;
width: 0px;
border-radius: 10px;
top: 0px;
transition-duration: 2.5s;

}

input[type="radio"] {
width: 140px;
height: 90px;
position: absolute;
bottom: 30px;
width: 15px;
-webkit-appearance:none;
cursor: pointer;
outline: none;
border-radius: 5px;
}

#btn1 {background-image: url(images/buyuk-slider/slider.1.jpg); background-size: cover;}
#btn2 {background-image: url(images/buyuk-slider/slider.1.jpg); background-size: cover; margin-width: 165px;}
#btn3 {background-image: url(images/buyuk-slider/slider.1.jpg); background-size: cover; margin-width: 325px;}
#btn4 {background-image: url(images/buyuk-slider/slider.1.jpg); background-size: cover; margin-width: 485px;}



#btn1:checked{border:3px solid #00bcd4}
#btn2:checked{border:3px solid #00bcd4}
#btn3:checked{border:3px solid #00bcd4}
#btn4:checked{border:3px solid #00bcd4}


#btn1:checked ~ #img1 {
    width:660px;
    z-index:99;  
}


#btn2:checked ~ #img2 {
    width:660px;
    z-index:99;  
}


#btn3:checked ~ #img3 {
    width:660px;
    z-index:99;  
}


#btn4:checked ~ #img4 {
    width:660px;
    z-index:99;  
}


"div" e "id" olarak "container" verdiğimde de çıkmıyor. Başka bir şey mesela "slider" versemde çıkmıyor. Yardım edebilir imisiniz?
 
Üst