Приветствую всех, кто решился прочитать текущую статью. Сегодня я расскажу вам, как сделать слайдер на JavaScript. Создание данного инструмента требуется на многих сайтах. Для этого используются различные плагины, фреймворки и библиотеки.
Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!
Какие виды слайдеров бывают и где они могут понадобится?
Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.
Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.
В основном заказчики просят внедрять на веб-страницы галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. Каруселью такой механизм прозвали из-за того, что показ картинок повторяется по кругу.
На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.
Самостоятельная деятельность
Ну а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый JavaScript. Это будет автоматический переключатель картинок по кругу.
Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html>
<html>
<head>
<title>Автоматический переключатель изображений</title>
<!--Указываю тип кодировки -->
<meta charset="utf-8">
<!-- Строка ниже позволяет сделать веб-страницу адаптивной-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*Описываю внешний вид каркаса, основы для будущего слайдера */
#slides{
position: relative;
height: 415px;
width: 100%;
padding: 0px;
list-style-type: none;
box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010;
}
/* Редактирую отображение картинок*/
img {
width: auto;
height: 390px;
padding: 13px;
}
/*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */
li {
text-align: center;
}
/*Описываю внешний вид самих слайдов */
.slide{
position: absolute;
opacity: 0;
top: 0px;
left: 0px;
height: 100%;
z-index: 3;
width: 100%;
background: blue;
-moz-transition: opacity 1.5s;
transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
}
/*При отображении объект становится видимым и выдвигается на передний план*/
.showing{
opacity: 1;
z-index: 4;
}
</style>
</head>
<body>
<!--Создаю список из четырех фотографий. Для будущей обработки данного кода в скрипте я прописал наименования классов. То изображение, которое будет отображаться на экране, отмечается классом "showing" -->
<ul id="slides">
<li class="slide showing"><img src ="http://www.sonarium.ru/wp-content/uploads/2013/07/sobaka-400x300.jpeg"></li>
<li class="slide"></li>
<li class="slide"><img src ="http://malteze.net/images/sampledata/poroda/2014/1sr_54463893746575.jpg"></li>
<li class="slide"><img src ="http://all-terriers.ru/_nw/8/96664315.jpg"></li>
</ul>
<!-- Создаю скрипт, который переключает фотографии. Ниже я подробнее опишу его работу. Кстати, его вы можете внедрить в любую часть программы.-->
<script>
var MySlider = document.querySelectorAll('#slides .slide');
var currentPicture = 0;
var IntervalForChange = setInterval(nextSlide,2700);
function nextSlide(){
MySlider[currentPicture].className = 'slide';
currentPicture = (currentPicture+1)%MySlider.length;
MySlider[currentPicture].className = 'slide showing';
}
</script>
</body>
</html> |
Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.
Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись
document.querySelectorAll ('#slides .slide')
Таким образом, в MySlider хранится коллекция из четырех элементов.
Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide.
Переходим к самой функции.
Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing» на «slide». Следовательно, изображение становится невидимым.
Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально:
1%4=1
2%4=2
3%4=3
4%4=0
А вот теперь полученному элементу присваиваю описание классов «slide showing». Как видите, все реализуется проще простого.
Спасибо за внимание. Не забывайте вступать в группу моих подписчиков, читать новые статьи и конечно же делиться ссылками на понравившиеся публикации с друзьями. Желаю удачи в изучении JavaScript. Пока-пока!
С уважением, Роман Чуешов
Слайдеры сейчас востребованы, их можно встретить на многих сайтах, под них выпущены специальные плагины, но лучше воспользоваться собственноручно написанным кодом под свои потребности.
Руслан, куда приведённый код можно вставить в ВордПресс, в смысле в какие файлы? Наверно один файл придётся подредактировать.
Если что, то я Роман!)))
Вставляй в файл, который отвечает за вывод информации, где ты хочешь чтобы отображался слайдер. Обычно это header.php или page.pho шаблона блога.
Прошу прощения, Роман! Иногда переклинивает от усталости.
В любое место header.php или page.php можно код вставлять? Потому что читаешь статьи, в них написано, что код нужно вставить после таких-то строк или до каких-то.
Обычно в файл header.php вставляют. В том месте, где надо слайдер вывести. Между тегами div.