Красивый полноэкранный 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 слайдов (для последнего я стили не прописывал).
Зеленым отмечена ссылка к картинке.