Раздвижной полноэкранный 3D-слайдер с помощью jQuery и CSS3
1740 просмотров || Скачали 339 раз || Оставили 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
Теги
Подборка Flash часов №2 Редактирование титула в uWnd-окне Быстрое редактирование материалов в каталоге файлов Карта "Сталкер Зов Припяти" v1.0 Psshablon Flash шаблон Frog Design Быстрая смена аватара в uWnd окне Красивый слайдер с 3d эффектами на jQuery Скрипт снега для сайта uCoz Упрощенный вид uNet-регистрации Светлый шаблон zaucoz Улучшаем навигацию в личных сообщениях Новый вид истории ЛС Набор красивых Flash иконок Удобная форма добавления комментариев Флэш шаблон Travel Club Запрет на определенные слова в названии темы Универсальный анти-мат на весь сайт Новая версия скрипта "Арена" от Яндекс'а Снаряжение для профиля в стиле сталкер Проверка на правильность ввода каптчи Музыкальный шаблон для uCoz Семейное положение из 1 поля AOL Вывод полного имени файла Шаблон Counter Strike Замена админ-бара на свой / WoS-Bar Красивый вид опросов Красивый вид рейтинга материалов Новый вид отображения категорий Рип шаблона sstalkers.ru + бонус jQuery Ripples - эффекты разводов на воде. Красивый флеш шаблон для uCoz Уникальный скрипт "Выстрел" Подробная информация об авторе материала Расширенная онлайн статистика для ucoz без php "Drag and drop" элементов сайта Рип игрового шаблона Acc-Team Очень красивый шаблон Ability Игра "Угадай число" Необычный вид комментариев Игра "Тетрис" на jQuery Автоматическое исправление глючного кода Персональный дневник сталкера Скрипт "Преобразовать BB-код" PSD Макет Skylight Анимированное появление блоков на jQuery и CSS3 Модуль Спасибо для uCoz Новый вид репутации + сортировка Блочный вид форума Большой сборник иконок социальных сетей с psd