Не получается со слайдером

[Ratibor]

Доброе время суток! Не могу понять почему не работает помогите разобраться в коде. Скриншот того что должно получится http://clip2net.com/s/3BzTwIW

HTML:

<div class="container">

<input type="submit" name="slides" id="btn-4" value="Доставка" checked>

<input type="submit" name="slides" id="btn-5" value="Гарантия">

<input type="submit" name="slides" id="btn-6" value="Кредит">

<div class="site-wrapper2">

        <div class="text-content clearfix" id="slide4">

             <h2>Доставка</h2>

            <img src="img/delivery.png" alt="Доставщик">

            <p>Мы с удовольствием доставим ваш товар прямо к вашему подъезду совершенно бесплатно! Ведь мы неплохо заработаем, поднимая его на ваш этаж.</p>

      </div>

      <div class="text-content" id="slide5">

           <h2>Гарантия</h2>

           <p>Если из-за возгарания купленного у нас товара у вас сгорит дом — не переживайте, мы выдадим вам новый. Товар, не дом, конечно же.</p>

           <img src="img/warranty.png" alt="Гарантия">

     </div>

     <div class="text-content" id="slide6">

           <h2>Кредит</h2>

           <img src="img/credit.png" alt="Кредит">

           <p>Залезть в долговую яму стало проще! Кредитные консультанты подберут для вас наиболее выгодные условия кредита. Выгодные для нашего банка, разумеется.</p>

     </div>

</div>

<div class="slider-controls2">

    <label for="btn-4"></label>

    <label for="btn-5"></label>

     <label for="btn-6"></label>

</div>

 

CSS:

.text-content { display: none; }

#btn-4:checked ~ .site-wrapper2 #slide4,

#btn-5:checked ~ .site-wrapper2 #slide5,

#btn-6:checked ~ .site-wrapper2 #slide6 { display: block; }

[Endorphin]

Потому что элементы слева должны быть ссылками а не инпутами, конечно можно запарится и сделать на чеках и инпутах, но проще будет js