X
Заказать услугу

Как создать адаптивный слайдер для сайта

Плагины и Шаблоны для Wordpress
  • 2019-08-18
  • 1207 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Сегодня хочу показать вам еще один слайдер, который может быть адаптивным и украсит ваш сайт. На этом сайте есть много слайдеров и этот пойдет в коллекцию к ним. Слайдер не сложный, имеет настройки, его можно легко переделать под свой сайт. Данный слайдер, так же можно переделать для WordPress, чтобы он выводил в качестве слайдов - миниатюры записей с заглавиями, превью и тд. Думаю, напишу статью и об этом, но немного позже.

Как создать адаптивный слайдер для сайта

Сегодняшний слайдер будет работать, используя 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;

На первый взгляд кода много, но если разобраться то все тут просто. Я бы отнес данный слайдер к одному из легких в использовании.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 5, в среднем: 3.4 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.