Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Крутой адаптивный слайдер на чистом CSS
Крутой адаптивный слайдер на чистом CSS
AndreyДата: Понедельник, 20.10.2014, 17:34:21 | Сообщение # 1
Технарь
Offline
3

Когда увидел этот слайдер я был в шоке. Мало того что он написан на чистом CSS! Так он ещё и адаптивный!

И так смотрим мой тест на Фидле

И начнём установку!

С начала подключим CSS стиль. После < /head > вставьте:
Код
<link rel="stylesheet" href="/css/style.css">


И осталось прописать сам слайдер в том месте где хотите его видеть:
Код
<div class='csslider1 autoplay '>     
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' autocomplete="off">     
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' autocomplete="off">     
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' autocomplete="off">     
<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' autocomplete="off">     
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked autocomplete="off">     
<input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause' autocomplete="off">     
<input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause' autocomplete="off">     
<input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause' autocomplete="off">     
<input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause' autocomplete="off">     
<ul>     
<div style="width: 100%; visibility: hidden; font-size: 0px; line-height: 0;">     
<img src="Ссылка на картинку слайда" style="width: 100%;">     
</div>     
<li class='num0 img'>     
<img src='Ссылка на картинку слайда' alt='Bmw F-800 ' title='Bmw F-800 ' />     
</li>     
<li class='num1 img'>     
<img src='Ссылка на картинку слайда' alt='Motorcycle jump ' title='Motorcycle jump ' />     
</li>     
<li class='num2 img'>     
<img src='Ссылка на картинку слайда' alt='Stunt rider' title='Stunt rider' />     
</li>     
<li class='num3 img'>     
<img src='Ссылка на картинку слайда' alt='Dirt bike' title='Dirt bike' />     
</li>     
</ul>     

<div class='cs_description'>     
<label class='num0'> <span class="cs_title"><span class="cs_wrapper">Bmw F-800 </span></span>     
<br/><span class="cs_descr"><span class="cs_wrapper">sportbike</span></span>     
</label>     
<label class='num1'> <span class="cs_title"><span class="cs_wrapper">Motorcycle jump </span></span>     
<br/><span class="cs_descr"><span class="cs_wrapper">autumn</span></span>     
</label>     
<label class='num2'> <span class="cs_title"><span class="cs_wrapper">Stunt rider</span></span>     
<br/><span class="cs_descr"><span class="cs_wrapper">San Francisco</span></span>     
</label>     
<label class='num3'> <span class="cs_title"><span class="cs_wrapper">Dirt bike</span></span>     
<br/><span class="cs_descr"><span class="cs_wrapper"> Motocross </span></span>     
</label>     
</div>     
<div class='cs_play_pause'>     
<label class='cs_play' for='cs_play1'><span><i></i></span>     
</label>     
<label class='cs_pause num0' for='cs_pause1_0'><span><i></i></span>     
</label>     
<label class='cs_pause num1' for='cs_pause1_1'><span><i></i></span>     
</label>     
<label class='cs_pause num2' for='cs_pause1_2'><span><i></i></span>     
</label>     
<label class='cs_pause num3' for='cs_pause1_3'><span><i></i></span>     
</label>     
</div>     
<div class='cs_arrowprev'>     
<label class='num0' for='cs_slide1_0'><span><i></i></span>     
</label>     
<label class='num1' for='cs_slide1_1'><span><i></i></span>     
</label>     
<label class='num2' for='cs_slide1_2'><span><i></i></span>     
</label>     
<label class='num3' for='cs_slide1_3'><span><i></i></span>     
</label>     
</div>     
<div class='cs_arrownext'>     
<label class='num0' for='cs_slide1_0'><span><i></i></span>     
</label>     
<label class='num1' for='cs_slide1_1'><span><i></i></span>     
</label>     
<label class='num2' for='cs_slide1_2'><span><i></i></span>     
</label>     
<label class='num3' for='cs_slide1_3'><span><i></i></span>     
</label>     
</div>     
<div class='cs_bullets'>     
<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>     
<span class='cs_thumb'><img src='Ссылка на картинку-миниатюру слайда' alt='Bmw F-800 ' title='Bmw F-800 ' /></span>     

</label>     
<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>     
<span class='cs_thumb'><img src='Ссылка на картинку-миниатюру слайда' alt='Motorcycle jump ' title='Motorcycle jump ' /></span>     

</label>     
<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>     
<span class='cs_thumb'><img src='Ссылка на картинку-миниатюру слайда' alt='Stunt rider' title='Stunt rider' /></span>     

</label>     
<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>     
<span class='cs_thumb'><img src='Ссылка на картинку-миниатюру слайда' alt='Dirt bike' title='Dirt bike' /></span>     

</label>     
</div>     
     </div>


Вот и всё, осталось только из прикреплённого ниже архива залить файл со стилем к себе на хост в папку "css"

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Крутой адаптивный слайдер на чистом CSS
Страница 1 из 11
Поиск: