Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Как сделать простой слайдер на javascript. Пошаговая инструкция для новичков

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

Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!

Какие виды слайдеров бывают и где они могут понадобится?

Создание удобных галерей для просмотра изображений требуется на всех веб-сервисах, где есть хоть какие-то фотографии. Это могут быть интернет-магазины, сайты-портфолио, новостные и обучающие сервисы, сайты компаний и развлекательных заведений с фотоотчетами и т.д.

Однако это стандартное применение слайдеров. Подобные технологии также используют для привлечения клиентов к акционным товарам, услугам или же для описания преимуществ предприятий.

В основном заказчики просят внедрять на веб-страницы галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. Каруселью такой механизм прозвали из-за того, что показ картинок повторяется по кругу.

На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.

Самостоятельная деятельность

Собственный слайдер на 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. Пока-пока!

С уважением, Роман Чуешов


Прочитано: 46 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

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

    03.01.2017 в 04:36
  • Денис

    Руслан, куда приведённый код можно вставить в ВордПресс, в смысле в какие файлы? Наверно один файл придётся подредактировать.

    03.01.2017 в 04:40
    • Роман

      Если что, то я Роман!)))

      Вставляй в файл, который отвечает за вывод информации, где ты хочешь чтобы отображался слайдер. Обычно это header.php или page.pho шаблона блога.

      04.01.2017 в 22:00
    • Денис

      Прошу прощения, Роман! Иногда переклинивает от усталости.

      В любое место header.php или page.php можно код вставлять? Потому что читаешь статьи, в них написано, что код нужно вставить после таких-то строк или до каких-то.

      05.01.2017 в 09:23
      • Роман

        Обычно в файл header.php вставляют. В том месте, где надо слайдер вывести. Между тегами div.

        08.01.2017 в 09:09