Сегодняшний слайдер будет работать, используя jQuery. Ознакомится с ним можно на странице примера:


Чтобы добавить такой слайдер на свой сайт, как обычно, вам нужно выполнить несколько пунктов.
jQuery скрипт
Так как я сказал выше, что наш слайдер работает на основе jQuery, то нужно убедится что эта библиотека подключена к вашему сайту. Проанализируйте исходный код вашего сайт и в шапке сайта или подвале, должна располагаться подобная строка, возможно, с другой версией библиотеки.
1 | <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" ></script> |
Если ничего такого нет, то нужно подключить библиотеку. Только после нее нужно будет добавлять скрипт слайдера. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?. Теперь можно добавить уже сам скрипт, который выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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 разметку. Добавьте ее в то место где хотите вывести свой слайдер. Внешне код выглядит большим, но сложного в нем ничего нет:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <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 стилей. Добавьте их в ваш файл стилей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .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;
На первый взгляд кода много, но если разобраться то все тут просто. Я бы отнес данный слайдер к одному из легких в использовании.
На этом все, спасибо за внимание. 🙂