• 69583
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Делюсь своей находкой с вами, обалденный параллакс слайдер. Демо вы уже наверное посмотрели,слайдер полно-экранный и адаптивный,и сейчас мы установим его на свой сайт.
И так приступим.
1.Скачиваем архив с исходниками Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,и заливаем файл скрипта и стиля в соответствующие папки вашего шаблона ,у меня это папки js и style.
2.В main.tpl туда где хотим видеть слайдер добавляем сам код слайдера

Код:
<div class="slider-container">
<div class="slider-control left inactive"></div>
<div class="slider-control right"></div>
<ul class="slider-pagi"></ul>
<div class="slider">
<div class="slide slide-0 active">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Проект 1</h2>
<p class="slide__text-desc">Здесь любой ваш текст.</p>
<a class="slide__text-link">Ссылка на проект</a>
</div>
</div>
</div>
<div class="slide slide-1 ">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Проект 2</h2>
<p class="slide__text-desc">Здесь любой ваш текст</p>
<a class="slide__text-link">Ссылка на проект</a>
</div>
</div>
</div>
<div class="slide slide-2">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Проект 3</h2>
<p class="slide__text-desc">Здесь любой ваш текст.</p>
<a class="slide__text-link">Ссылка на проект</a>
</div>
</div>
</div>
<div class="slide slide-3">
<div class="slide__bg"></div>
<div class="slide__content">
<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
</svg>
<div class="slide__text">
<h2 class="slide__text-heading">Проект 4</h2>
<p class="slide__text-desc">Здесь любой ваш текст.</p>
<a class="slide__text-link">Ссылка на проект</a>
</div>
</div>
</div>
</div>
</div>
3.Подключаем стиль слайдера в head
Код:
<link rel="stylesheet" href="{{ tpl_url }}/style/style.css">
Или просто копируем стиль и добавляем в существующий файл стилей.
Код:
.slider-container {
position: relative;
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: all-scroll;
}

.slider-control {
z-index: 2;
position: absolute;
top: 0;
width: 12%;
height: 100%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
will-change: opacity;
opacity: 0;
}
.slider-control.inactive:hover {
cursor: auto;
}
.slider-control:not(.inactive):hover {
opacity: 1;
cursor: pointer;
}
.slider-control.left {
left: 0;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
}
.slider-control.right {
right: 0;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.slider-pagi {
position: absolute;
z-index: 3;
left: 50%;
bottom: 2rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 0;
list-style-type: none;
}
.slider-pagi__elem {
position: relative;
display: inline-block;
vertical-align: top;
width: 2rem;
height: 2rem;
margin: 0 0.5rem;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
}
.slider-pagi__elem:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1.2rem;
height: 1.2rem;
background: #fff;
border-radius: 50%;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}

.slider {
z-index: 1;
position: relative;
height: 100%;
}
.slider.animating {
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
will-change: transform;
}
.slider.animating .slide__bg {
-webkit-transition: -webkit-transform 0.5s;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
will-change: transform;
}

.slide {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide.active .slide__overlay,
.slide.active .slide__text {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide__bg {
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background-size: cover;
will-change: transform;
}
.slide:nth-child(1) {
left: 0;
}
.slide:nth-child(1) .slide__bg {
left: 0;
background-image: url("slider-3.jpg");
}
.slide:nth-child(1) .slide__overlay-path {
fill: #e99c7e;
}
@media (max-width: 991px) {
.slide:nth-child(1) .slide__text {
background-color: rgba(233, 156, 126, 0.8);
}
}
.slide:nth-child(2) {
left: 100%;
}
.slide:nth-child(2) .slide__bg {
left: -50%;
background-image: url("slider-2.jpg");
}
.slide:nth-child(2) .slide__overlay-path {
fill: #e1ccae;
}
@media (max-width: 991px) {
.slide:nth-child(2) .slide__text {
background-color: rgba(225, 204, 174, 0.8);
}
}
.slide:nth-child(3) {
left: 200%;
}
.slide:nth-child(3) .slide__bg {
left: -100%;
background-image: url("slider-1.jpg");
}
.slide:nth-child(3) .slide__overlay-path {
fill: #adc5cd;
}
@media (max-width: 991px) {
.slide:nth-child(3) .slide__text {
background-color: rgba(173, 197, 205, 0.8);
}
}
.slide:nth-child(4) {
left: 300%;
}
.slide:nth-child(4) .slide__bg {
left: -150%;
background-image: url("slider-4.jpg");
}
.slide:nth-child(4) .slide__overlay-path {
fill: #cbc6c3;
}
@media (max-width: 991px) {
.slide:nth-child(4) .slide__text {
background-color: rgba(203, 198, 195, 0.8);
}
}
.slide__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide__overlay {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
min-height: 810px;
-webkit-transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
transition: transform 0.5s 0.5s, opacity 0.2s 0.5s, -webkit-transform 0.5s 0.5s;
will-change: transform, opacity;
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
opacity: 0;
}
@media (max-width: 991px) {
.slide__overlay {
display: none;
}
}
.slide__overlay path {
opacity: 0.8;
}
.slide__text {
position: absolute;
width: 25%;
bottom: 15%;
left: 12%;
color: #fff;
-webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
transition: transform 0.5s 0.8s, opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
will-change: transform, opacity;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
@media (max-width: 991px) {
.slide__text {
left: 0;
bottom: 0;
width: 100%;
height: 20rem;
text-align: center;
-webkit-transform: translateY(50%);
transform: translateY(50%);
-webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
transition: transform 0.5s 0.5s, opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
padding: 0 1rem;
}
}
.slide__text-heading {
font-family: 'Exo 2', Helvetica, Arial, sans-serif;
font-size: 5rem;
margin-bottom: 2rem;
}
@media (max-width: 991px) {
.slide__text-heading {
line-height: 20rem;
font-size: 3.5rem;
}
}
.slide__text-desc {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
.slide__text-desc {
display: none;
}
}
.slide__text-link {
z-index: 5;
display: inline-block;
position: relative;
padding: 0.5rem;
cursor: pointer;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 2.3rem;
-webkit-perspective: 1000px;
perspective: 1000px;
}
@media (max-width: 991px) {
.slide__text-link {
display: none;
}
}
.slide__text-link:before {
z-index: -1;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(-85deg);
transform: rotateX(-85deg);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
will-change: transform;
}
.slide__text-link:hover:before {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
4.Подключаем скрипты перед закрытием тега body
Код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{ tpl_url }}/js/slider.js"></script>
Если jquery у вас уже подключен то второй раз подключать не надо.
Изображения задаются в стилях
Код:
background-image: url("slider-4.jpg");
}
И не забываем указывать правильные пути к изображениям ,у меня они выглядят так
Код:
background-image: url("../img/slider-4.jpg");

Можешь почитать и вот эту статейку "Тег col "

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

какой форум лучше для вас
Результаты

----