Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3
1656 просмотров || Скачали 299 раз || Оставили 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
Теги
Набор кистей "Курсоры" Игра "Шарик" в Ajax Флэш шаблон Travel Club Подборка Flash часов №3 Изменение кнопок "Редактировать" и "Удалить" на форуме Персональная страница пользователя в стиле Stalker Выдвижная верхняя панель с красивым эффектом Улучшаем навигацию в личных сообщениях Статусы в списке пользователей Красивый вид замечаний со шкалой Расширенная онлайн статистика для ucoz без php Шаблон Мегатрон 2.0 Блочный вид форума Быстрая смена аватара в uWnd окне Любое количество дополнительных полей для Каталога Файлов Рип вида материалов ucozabc.ru Красивый вид опросов для uCoz Новый вид репутации + сортировка Игровой шаблон для uCoz Скрипт "Преобразовать BB-код" Модификация "Тем", "Ответов" и "Автора темы" jQuery Ripples - эффекты разводов на воде. "Drag and drop" элементов сайта Упрощенный вид uNet-регистрации Игра "Угадай число" Эмуляция нажатия правой кнопки мыши Очень красивый шаблон Ability Flash шаблон Frog Design Оригинал шаблона Info-Rip Светлый шаблон zaucoz Изменение вида категорий при добавления файла Универсальный анти-мат на весь сайт Скрипт снега для сайта uCoz Скрипт Генератора пароля при регистрации Запрет на определенные слова в названии темы Автоматическая подгрузка материалов Дополнительные BB-коды для каталога файлов Рип игрового шаблона Acc-Team Clip2net Красивый вид рейтинга материалов Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3 Игра Doodle Jump у вас на сайте! Самостоятельный переход пользователей в другую группу Необычный вид комментариев Автоматические баллы Быстрое редактирование материалов в каталоге файлов Шаблон "daintiness" для сайтов uCoz Красивый вид и форма добавления комментариев Автоматическое исправление глючного кода Снаряжение для профиля в стиле сталкер