Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3
1651 просмотр || Скачали 296 раз || Оставили 0 комментариев


Скачать. Размер файла: 246.2 Kb

Красивый полноэкранный 3d слайдер. Простая установка и использование + маленький вес.

Думаю, словами его описывать не стоит, вот Демо.

Теперь перейдем к установке.
Скачиваем архив → В файловом менеджере создаем папку sldr007 и заливаем туда содержимое архива.
Затем идем на страницу, где хотим видеть слайдер (наверное, лучше поставить на главную или создать отдельную страницу, но это уже вам решать).

Заменяем весь находящийся там код на этот:
Код
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/sldr007/reset.css">  
  <link rel="stylesheet" href="/sldr007/style.css">  
  <script src="/sldr007/modernizr.js"></script>  
   
  <title>Полноэкранный 3d слайдер</title>
  <style>
  #puzadpn {display:none;}
  </style>
</head>
<body>
  <section class="cd-section">
  <div class="cd-block">
  <h1>$POWERED_BY$</h1>
  </div>
  </section> <!-- .cd-section -->

  <section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>
  Слайд 1. А дальше текст, текст<br>И текст.
  </p>
  </div>
  </div>
  </section> <!-- .cd-section -->

  <section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>
  Слайд 2. А дальше текст, текст<br>И текст.
  </p>
  </div>
  </div>
  </section> <!-- .cd-section -->

  <section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>
  Слайд 3. А дальше текст, текст<br>И текст.  
  </p>
  </div>
  </div>
  </section>

<section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>
  Слайд 4. А дальше текст, текст<br>И текст.  
  </p>
  </div>
  </div>
  </section>

<section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>
  Слайд 5. А дальше текст, текст<br>И текст.  
  </p>
  </div>
  </div>
  </section>

<section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block">
  <p>Слайд 6. А дальше текст, текст<br>И текст.</p>
  </div>
  </div>
  </section>

<section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block" align="center">
  <p>
  Полноэкранный слайдер с красивым эффектом.<br>Итак, занавес открывается!
  </p>
  </div>
  </div>
  </section> <!-- .cd-section -->
   
   
   
   
  <!-- ПЕРЕД ЭТИМ ТЕГОМ ВСТАВЛЯЙТЕ НОВЫЕ СЛАЙДЫ -->

  <nav>
  <ul class="cd-vertical-nav">
  <li><a href="#0" class="cd-prev inactive">Next</a></li>
  <li><a href="#0" class="cd-next">Prev</a></li>
  </ul>
  </nav> <!-- .cd-vertical-nav -->

<script src="/sldr007/main.js"></script>  
</body>
</html>


Как вставлять новые слайды.
Копируем это:
Код
<section class="cd-section">
  <div class="cd-block">
  <div class="cd-half-block"></div>

  <div class="cd-half-block" align="center">
  <p>
  Тут какой-то ваш текст или что-то ещё.
  </p>
  </div>
  </div>
  </section>

В вставляем перед этим:
Код
<!-- ПЕРЕД ЭТИМ ТЕГОМ ВСТАВЛЯЙТЕ НОВЫЕ СЛАЙДЫ -->


Разберем ситуацию с картинками.
Открываем файл style.css и ищем вот такой код (строки 131-157):
Код
.cd-section:nth-of-type(2) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-1.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(3) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-2.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(4) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-3.jpg");
  background-size: cover;
}

.cd-section:nth-of-type(5) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-1.jpg");
  background-size: cover;
}

.cd-section:nth-of-type(6) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-2.jpg");
  background-size: cover;
}

.cd-section:nth-of-type(7) .cd-half-block:first-of-type {
  background-image: url("/sldr007/img-3.jpg");
  background-size: cover;
}

.cd-section:nth-of-type(7) .cd-half-block:first-of-type {
background-image: url("/sldr007/img-3.jpg");

Красным отмечен порядковый номер слайда. Сейчас в слайдере 8 слайдов (для последнего я стили не прописывал).
Зеленым отмечена ссылка к картинке.

Автор: Неизвестен
Сайт автора: Неизвестен



Категория: Слайдеры | Добавил: Endless | Теги: Раздвижной, полноэкранный, помощью, JQuery, Слайдеры, CSS3, для ucoz, 3D-слайдер, юкоз
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
Поиск по сайту
Случайная статья
Случайный материал
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Теги
Флэш шаблон Travel Club Анимированное появление блоков на jQuery и CSS3 Psshablon Новый вид репутации + сортировка Способы скрыть админ-бар Генератор смайлов! Скрипт "Преобразовать BB-код" Вывод полного имени файла PSD макет блога Уникальный скрипт "Выстрел" Скрипт "Арена" для сталкер-сайтов jQuery Ripples - эффекты разводов на воде. Скрипт изменения название модуля Набор красивых Flash иконок Изменение кнопок "Редактировать" и "Удалить" на форуме Модуль Спасибо для uCoz Оригинал шаблона Info-Rip Расширенная онлайн статистика для ucoz без php Автоматическая выдача награды за посещение сайта Персональная страница пользователя в стиле Stalker Проверка на правильность ввода каптчи Шаблон Counter Strike Скрипт Генератора пароля при регистрации Улучшаем навигацию в личных сообщениях Очень красивый шаблон Ability "Drag and drop" элементов сайта Светлый шаблон zaucoz Красивый вид и форма добавления комментариев Шаблон DoubleGame для uCoz Персональный дневник сталкера Предпросмотр добавляемого материала в Ajax окне для любого модуля Статусы в списке пользователей Модификация "Тем", "Ответов" и "Автора темы" Шаблон Awurs для сайтов World of Tanks Скрипт снега для сайта uCoz Подборка Flash часов №3 Красивый вид опросов Запрет на определенные слова в названии темы Большой сборник иконок социальных сетей с psd Шаблон Мегатрон 2.0 Подборка Flash часов №2 Удобная форма добавления комментариев Эффект реалистичных дождевых капель на стекле через HTML5 Новый вид истории ЛС PSD Макет Skylight Снаряжение для профиля в стиле сталкер Выдвижная верхняя панель с красивым эффектом Красивый слайдер с 3d эффектами на jQuery Новый вид истории репутации пользователя Дополнительные BB-коды для каталога файлов