Сегодняшний слайдер будет работать, используя jQuery. Ознакомится с ним можно на странице примера:
Чтобы добавить такой слайдер на свой сайт, как обычно, вам нужно выполнить несколько пунктов.
jQuery скрипт
Так как я сказал выше, что наш слайдер работает на основе jQuery, то нужно убедится что эта библиотека подключена к вашему сайту. Проанализируйте исходный код вашего сайт и в шапке сайта или подвале, должна располагаться подобная строка, возможно, с другой версией библиотеки.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Если ничего такого нет, то нужно подключить библиотеку. Только после нее нужно будет добавлять скрипт слайдера. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?. Теперь можно добавить уже сам скрипт, который выглядит так:
<script>
jQuery(document).ready(function($){
'use strict';
var slider=function(e){
const ClassName = {INDICATOR_ACTIVE: 'slider_indicator_active',ITEM: 'slider_item',ITEM_LEFT: 'slider_item_left',ITEM_RIGHT: 'slider_item_right',ITEM_PREV: 'slider_item_prev',ITEM_NEXT: 'slider_item_next',ITEM_ACTIVE: 'slider_item_active'}
var d=!1,u=0,i={},v={},I={},f={selector:"",isCycling:!0,direction:"next",interval:5e3,pause:!0},r=function(s){var n;return v.forEach(function(e,t){e===s&&(n=t)}),n},l=function(e,t,s){var n,a,i=ClassName.ITEM_RIGHT,r=ClassName.ITEM_PREV,l=v[t],c=v[s],o=function(){l.classList.remove(ClassName.ITEM_ACTIVE),l.classList.remove(i),c.classList.remove(r),c.classList.remove(i),c.classList.add(ClassName.ITEM_ACTIVE),window.setTimeout(function(){f.isCycling&&(clearInterval(u),C()),d=!1,l.removeEventListener("transitionend",o)},700)};d||(d=!0,"next"===e&&(i=ClassName.ITEM_LEFT,r=ClassName.ITEM_NEXT),c.classList.add(r),n=t,a=s,I.length===v.length&&(I[n].classList.remove(ClassName.INDICATOR_ACTIVE),I[a].classList.add(ClassName.INDICATOR_ACTIVE)),window.setTimeout(function(){c.classList.add(i),l.classList.add(i),l.addEventListener("transitionend",o)},0))},a=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=v.length-1,a=0===s?n:s-1;"next"===e&&(a=s==n?0:s+1),l(e,s,a)},C=function(){f.isCycling&&(u=window.setInterval(function(){a(f.direction)},f.interval))},t=function(e){var t=i.querySelector("."+ClassName.ITEM_ACTIVE),s=r(t),n=e.target.getAttribute("data-slide-to");if(e.target.hasAttribute("data-slide-to")||e.target.classList.contains("slider_control"))if(e.target.hasAttribute("data-slide-to")){if(s===n)return;l(s<n?"next":"prev",s,n)}else e.preventDefault(),a(e.target.classList.contains("slider_control_next")?"next":"prev")};for(var s in e)s in f&&(f[s]=e[s]);return i="string"==typeof f.selector?document.querySelector(f.selector):f.selector,v=i.querySelectorAll("."+ClassName.ITEM),I=i.querySelectorAll("[data-slide-to]"),C(),i.addEventListener("click",t),f.pause&&f.isCycling&&(i.addEventListener("mouseenter",function(e){clearInterval(u)}),i.addEventListener("mouseleave",function(e){clearInterval(u),C()})),{next:function(){a("next")},prev:function(){a("prev")},stop:function(){clearInterval(u)},cycle:function(){clearInterval(u),C()}}}({
selector:".slider",
isCycling:true,
direction:"next",
interval:2000,
pause:false
});
});
</script>
Его тоже можно подключить по инструкции из статьи упомянутой выше. Данный скрипт имеет несколько настроек, которые могут вам пригодится. Давайте, рассмотрим их по-порядку.
- selector:".slider" - задаем класс для контейнера, что будет содержать слайдер. Если решите его изменить, то его нужно будет поменять во всех кодах.
- isCycling:true - автоматическая смена слайдов. false - чтобы отключить
- direction:"next" - направление смены слайдов. В данном случаи переход к следующему слайду. Слайды будут передвигаться влево. Чтобы поменять в обратную сторону, нужно указать prev.
- interval:2000 - время показа одного слайда. Время указано в миллисекундах и равно 2 сек. Можете поменять значение, например, на 5000. Это будет 5сек.
- pause:false - остановка слайдера, если навести на него курсор. В данном случаи - отключено. Чтобы включить нужно указать true.
HTML разметка
После добавления скрипта, можно добавлять HTML разметку. Добавьте ее в то место где хотите вывести свой слайдер. Внешне код выглядит большим, но сложного в нем ничего нет:
<div id="slider" class="slider"> <ol class="slider_indicators"> <li class="slider_indicator slider_indicator_active" data-slide-to="0"></li> <li class="slider_indicator" data-slide-to="1"></li> <li class="slider_indicator" data-slide-to="2"></li> <li class="slider_indicator" data-slide-to="3"></li> </ol> <div class="slider_items"> <div class="slider_item slider_item_1 slider_item_active"> <div class="slider_text"> <h1>Заголовок h1 слайда №1</h1> <h2>Подзаголовок h2</h2> <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> </div> <img src="images/1.jpg" alt="slide1"> </div> <div class="slider_item slider_item_2"> <div class="slider_text"> <h1>Заголовок h1 слайда №2</h1> <h2>Подзаголовок h2</h2> <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> </div> <img src="images/2.jpg" alt="slide2"> </div> <div class="slider_item slider_item_3"> <div class="slider_text"> <h1>Заголовок h1 слайда №3</h1> <h2>Подзаголовок h2</h2> <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> </div> <img src="images/3.jpg" alt="slide3"> </div> <div class="slider_item slider_item_4"> <div class="slider_text"> <h1>Заголовок h1 слайда №4</h1> <h2>Подзаголовок h2</h2> <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p> </div> <img src="images/4.jpg" alt="slide4"></div> </div> <a class="slider_control slider_control_prev" href="#" role="button"></a> <a class="slider_control slider_control_next" href="#" role="button"></a> </div>
Давайте, немного разберем этот код. Он имеет общий контейнер с классом slider, о котором мы говорили ранее.
Далее идет ol - список, внутри которого находятся 4 элемента. Это индикаторы слайдов. Если смотреть слайдер внешне, то это четыре полоски расположены в ряд, в зависимости от активного слайда определенный индикатор меняет цвет. Важно заметить, что количество элементов должно равняться количеству слайдов, так что если будете менять что-то учтите это. Первый индикатор имеет дополнительный класс slider_indicator_active и порядковый номер начинается с - 0, не с единицы.
После индикаторов идут четыре слайда в общем контейнере. В каждом слайде располагается блок с заголовками и текстом и после изображение. Разбирать тут нет особо смысла, все должно быть понятно, если вы не второй день изучаете HTML.
Заключительная часть, это две ссылки управлением смены слайдов - Вперед/Назад.
CSS стили
Заключительный шаг создания слайдера - добавление CSS стилей. Добавьте их в ваш файл стилей.
.slider {position:relative;}
.slider_items{position:relative;width:100%;overflow:hidden;max-height:588px;}
.slider_item{position:relative;display:none;width:100%;transition: transform 0.6s ease;backface-visibility: hidden;overflow:hidden;}
.slider_item_active,.slider_item_next,.slider_item_prev{display:block;}
.slider_item_next,.slider_item_prev{position: absolute;top:0;}
.slider_item_next.slider_item_left,
.slider_item_prev.slider_item_right{transform: translateX(0);}
.slider_item_next,
.slider_item_right.slider_item_active{transform: translateX(100%);}
.slider_item_prev,
.slider_item_left.slider_item_active{transform: translateX(-100%);}
.slider_control{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:49%;color:#fff;opacity:.5;}
.slider_control:hover,
.slider_control:focus{opacity:1;}
.slider_control_prev{left:0;}
.slider_control_next{right:0;}
.slider_control::before {content: '';height:80px;width:19px;position:absolute;display:inline-block;background:transparent no-repeat center center;background-size: 100% 100%;}
.slider_control_prev::before {background:url(images/arrows.png) no-repeat 0;left:15%;border-radius:0px 3px 3px 0px;}
.slider_control_next::before {background:url(images/arrows.png) no-repeat -19px 0;right:15%;border-radius:3px 0px 0px 3px;}
.slider_indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none;}
.slider_indicator{position: relative;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;border-radius:6px;}
.slider_indicator::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:"";}
.slider_indicator_active {background-color:#f00;}
.slider_items img{display:inline-block;height:auto;width:100%;vertical-align:bottom;}
.slider_text{z-index:3;position:absolute;top:10%;left:50%;margin-left:-400px;max-width:400px;}
.slider h1,.slider h2,.slider p{color:#fff;text-shadow:0 0 3px #000,0 0 10px #333;}
@media (max-width:1300px){
.slider_control_prev{left:5%;width:100px;}
.slider_control_next{right:5%;width:100px;}
}
@media (max-width:1050px){
.slider_text{top:10%;left:50%;margin-left:-200px;max-width:400px;}
}
@media (max-width:720px){
.slider_items{max-height:300px;}
.slider_items img{width:auto;height:100%;}
.slider_control_prev{display:none;}
.slider_control_next{display:none;}
.slider_text{top:1%;left:4%;right:4%;margin-left:0px;max-width:100%;}
}
Разбирать CSS смысла нет, тут все должно быть понятно. Обратите лишь внимание на вторую строку где указана максимальная высота слайдов - max-height:588px;
На первый взгляд кода много, но если разобраться то все тут просто. Я бы отнес данный слайдер к одному из легких в использовании.
На этом все, спасибо за внимание. 🙂
