Главная » Файлы » Прочие скрипты » CSS

Крутой адаптивный слайдер на чистом css для uCoz
[ Скачать с сервера (4.7 Kb) ] 20.10.14, 12:58:40



Честно признаюсь, такого слайдера я ещё ни разу не видел - мало того, что он адаптивный, стильно выглядящий, так ещё и выполнен на чистом css! В общем, забирайте себе, пока не растащили biggrin

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

После < /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

Категория: CSS | Добавил: Apocalypse | Теги: CSS, адаптивный, крутой, ucoz, чистом, на, для, слайдер
Просмотров: 2213 | Загрузок: 302 | Рейтинг: 3.0/2
Всего комментариев: 0
Имя *:
Email: