Слайдер на чистом CSS3 - Слайдеры - Скрипты - Каталог файлов - Все для uCoz

Преимущество данного слайдра в том что он использует только CSS3. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3.

Этот код вставляем туда где хотим видеть слайдер:

Код

<span style="font-size: 8pt;"><div class="slides"> </span></div><div> <ul>  </div><div> <li><img src="images/pic1.jpg" alt="image01" /> </div><div> <div>Описание #1</div> </div><div> </li> </div><div> <li><img src="images/pic2.jpg" alt="image02" /> </div><div> <div>Описание #2</div> </div><div> </li> </div><div> <li><img src="images/pic3.jpg" alt="image03" /> </div><div> <div>Описание #3</div> </div><div> </li> </div><div> <li><img src="images/pic4.jpg" alt="image04" /> </div><div> <div>Описание #4</div> </div><div> </li> </div><div> </ul> </div><div> </div>

А этот в CSS:

Код

/* Слайдер */ </div><div> .slides { </div><div> height:300px; </div><div> margin:50px auto; </div><div> overflow:hidden; </div><div> position:relative; </div><div> width:900px; </div><div> } </div><div> .slides ul { </div><div> list-style:none; </div><div> position:relative; </div><div> } </div><div><br></div><div> /* Кадры анимации #anim_slides */ </div><div> @-webkit-keyframes anim_slides { </div><div> 0% { </div><div> opacity:0; </div><div> } </div><div> 6% { </div><div> opacity:1; </div><div> } </div><div> 24% { </div><div> opacity:1; </div><div> } </div><div> 30% { </div><div> opacity:0; </div><div> } </div><div> 100% { </div><div> opacity:0; </div><div> } </div><div> } </div><div> @-moz-keyframes anim_slides { </div><div> 0% { </div><div> opacity:0; </div><div> } </div><div> 6% { </div><div> opacity:1; </div><div> } </div><div> 24% { </div><div> opacity:1; </div><div> } </div><div> 30% { </div><div> opacity:0; </div><div> } </div><div> 100% { </div><div> opacity:0; </div><div> } </div><div> } </div><div><br></div><div> .slides ul li { </div><div> opacity:0; </div><div> position:absolute; </div><div> top:0; </div><div><br></div><div> /* анимация css3 */ </div><div> -webkit-animation-name: anim_slides; </div><div> -webkit-animation-duration: 24.0s; </div><div> -webkit-animation-timing-function: linear; </div><div> -webkit-animation-iteration-count: infinite; </div><div> -webkit-animation-direction: normal; </div><div> -webkit-animation-delay: 0; </div><div> -webkit-animation-play-state: running; </div><div> -webkit-animation-fill-mode: forwards; </div><div><br></div><div> -moz-animation-name: anim_slides; </div><div> -moz-animation-duration: 24.0s; </div><div> -moz-animation-timing-function: linear; </div><div> -moz-animation-iteration-count: infinite; </div><div> -moz-animation-direction: normal; </div><div> -moz-animation-delay: 0; </div><div> -moz-animation-play-state: running; </div><div> -moz-animation-fill-mode: forwards; </div><div> } </div><div><br></div><div> /* Задержки css3 */ </div><div> .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { </div><div> -webkit-animation-delay: 6.0s; </div><div> -moz-animation-delay: 6.0s; </div><div> } </div><div> .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { </div><div> -webkit-animation-delay: 12.0s; </div><div> -moz-animation-delay: 12.0s; </div><div> } </div><div> .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { </div><div> -webkit-animation-delay: 18.0s; </div><div> -moz-animation-delay: 18.0s; </div><div> } </div><div> .slides ul li img { </div><div> display:block; </div><div> } </div><div><br></div><div> /* Кадры анимации #anim_titles */ </div><div> @-webkit-keyframes anim_titles { </div><div> 0% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> 5% { </div><div> left:10%; </div><div> opacity:1; </div><div> } </div><div> 20% { </div><div> left:10%; </div><div> opacity:1; </div><div> } </div><div> 25% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> 100% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> } </div><div> @-moz-keyframes anim_titles { </div><div> 0% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> 5% { </div><div> left:10%; </div><div> opacity:1; </div><div> } </div><div> 20% { </div><div> left:10%; </div><div> opacity:1; </div><div> } </div><div> 25% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> 100% { </div><div> left:100%; </div><div> opacity:0; </div><div> } </div><div> } </div><div><br></div><div> .slides ul li div { </div><div> background-color:#000000; </div><div> border-radius:10px 10px 10px 10px; </div><div> box-shadow:0 0 5px #FFFFFF inset; </div><div> color:#FFFFFF; </div><div> font-size:26px; </div><div> left:10%; </div><div> margin:0 auto; </div><div> padding:20px; </div><div> position:absolute; </div><div> top:50%; </div><div> width:200px; </div><div><br></div><div> /* Анимация css3 */ </div><div> -webkit-animation-name: anim_titles; </div><div> -webkit-animation-duration: 24.0s; </div><div> -webkit-animation-timing-function: linear; </div><div> -webkit-animation-iteration-count: infinite; </div><div> -webkit-animation-direction: normal; </div><div> -webkit-animation-delay: 0; </div><div> -webkit-animation-play-state: running; </div><div> -webkit-animation-fill-mode: forwards; </div><div><br></div><div> -moz-animation-name: anim_titles; </div><div> -moz-animation-duration: 24.0s; </div><div> -moz-animation-timing-function: linear; </div><div> -moz-animation-iteration-count: infinite; </div><div> -moz-animation-direction: normal; </div><div> -moz-animation-delay: 0; </div><div> -moz-animation-play-state: running; </div><div> -moz-animation-fill-mode: forwards; </div><div> }

Скачать файл

Инструкция по установке шаблонов:
Инструкция, приведенная ниже, поможет Вам быстро установить скачанный у нас с сайта шаблон. Для правильной установки прочтите, пожалуйста, внимательно все пункты инструкции, дабы не возникло дополнительных вопросов.
1. Прежде всего загружаем содержимое папки Файловый Менеджер на Ваш сайт.
2. Далее заходим в Дизайн - Управление дизайном (CSS), копируем содержимое файла Таблица стилей и вставляем с заменой. После используем текстовый файл Конструктор шаблонов для создания каркаса дизайна (Дизайн - Конструктор шаблонов).
3. И в заключении устанавливаем сами модули, находятся они в папках с названием, соответствующему названию модуля.