Главная » Файлы » Прочие скрипты » CSS |
Крутой адаптивный слайдер на чистом css для uCoz
[ Скачать с сервера (4.7 Kb) ] | 20.10.14, 12:58:40 |
Честно признаюсь, такого слайдера я ещё ни разу не видел - мало того, что он адаптивный, стильно выглядящий, так ещё и выполнен на чистом 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 Подстройте элементы слайдера под свой сайт и наслаждайтесь этим великолепием! Официальный источник слайдера ЗДЕСЬ Материал подготовлен Apocalypse | |
Просмотров: 2504 | Загрузок: 426 | |
Всего комментариев: 0 | |
| |