Как сделать — Адаптивное слайд-шоу или Карусель
Узнайте, как создать Адаптивное слайд-шоу с помощью CSS и JavaScript.
Слайд-шоу / Карусель
Слайд-шоу используется для циклического использования элементов:
Создание слайд-шоу
Шаг 1) добавить HTML:
Пример
<!— Slideshow container —>
<div >
<!— Full-width images with number and caption text —>
<div fade">
<div / 3</div>
<img src="img1.jpg" style="width:100%">
<div > </div>
Шаг 2) добавить CSS:
Стиль кнопки «Далее» и «назад», текст заголовка и точки:
Пример
/* Slideshow container */
.slideshow-container <
max-width: 1000px;
position: relative;
margin: auto;
>
/* Hide the images by default */
.mySlides <
display: none;
>
/* Next & previous buttons */
.prev, .next <
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
>
/* Position the "next button" to the right */
.next <
right: 0;
border-radius: 3px 0 0 3px;
>
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover <
background-color: rgba(0,0,0,0.8);
>
/* Caption text */
.text <
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>
/* Number text (1/3 etc) */
.numbertext <
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>
/* The dots/bullets/indicators */
.dot <
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>
.active, .dot:hover <
background-color: #717171;
>
/* Fading animation */
.fade <
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
>
Шаг 3) добавить JavaScript:
Пример
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) <
showSlides(slideIndex += n);
>
// Thumbnail image controls
function currentSlide(n) <
showSlides(slideIndex = n);
>
function showSlides(n) <
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length)
if (n < 1)
for (i = 0; i < slides.length; i++) <
slides[i].style.display = "none";
>
for (i = 0; i < dots.length; i++) <
dots[i].className = dots[i].className.replace(" active", "");
>
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
>
Автоматическое слайдшоу
Чтобы отобразить Автоматическое слайд-шоу, используйте следующий код:
Пример
var slideIndex = 0;
showSlides();
function showSlides() <
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) <
slides[i].style.display = "none";
>
slideIndex++;
if (slideIndex > slides.length)
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
>
Несколько слайд-шоу
Пример
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) <
showSlides(slideIndex[no] += n, no);
>
function showSlides(n, no) <
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length)
if (n < 1)
for (i = 0; i < x.length; i++) <
x[i].style.display = "none";
>
x[slideIndex[no]-1].style.display = "block";
>
Совет: Кроме того, проверить, как-слайд-шоу галерея и как-Лайтбокс.
W3.CSS Слайд-шоу
Просто создайте много элементов с одним и тем же именем класса:
Пример
И две кнопки для прокрутки изображений:
Пример
И добавьте JavaScript для выбора изображений:
Пример
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) <
showDivs(slideIndex += n);
>
function showDivs(n) <
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length)
if (n < 1)
for (i = 0; i < x.length; i++) <
x[i].style.display = "none";
>
x[slideIndex-1].style.display = "block";
>
Объяснение JavaScript кода
Сначала установите slideIndex на 1. (Первое изображение)
Затем вызовите showDivs() чтобы отобразить первое изображение.
Когда пользователь нажимает одну из кнопок вызова plusDivs().
Функция plusDivs() вычитает один или добавляет один к slideIndex.
Функция showDiv() скрывает (display="none") все элементы с именем класса "mySlides", и отображает (display="block") элемент с заданным slideIndex.
Введение в разработку слайд-шоу на JavaScript
В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.
JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.
В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
Структура HTML
Разметка HTML должна быть такой, чтобы страница оставалась читаемой и без CSS и JS. Поэтому нужно разобраться, какие компоненты будут составлять нашу структуру. Обычно это:
1) самый внешний контейнер
2) внутренний враппер
3) несколько элементов-слайдов
4) враппер для ссылок на страницы
5) две кнопки «предыдущая» и «следующая»
Компоненты 2, 4 и 5 необязательные, поскольку:
— слайды можно обернуть и в один элемент. Это делают, когда переход между слайдами делается через fade in / fade out
— ссылки на страницы и кнопки можно опустить, если слайд-шоу автоматическое, и происходит без вмешательства пользователя
Пример возможной HTML-структуры:
Для слайдов лучше использовать классы, поскольку на одной странице может быть несколько слайд-шоу. Для идентификации разных слайд-шоу можно использовать ID у внешнего контейнера.
Элементы с кнопками используются вместо ссылок, поскольку ссылки здесь не подходят, а с кнопками мы будем работать из скрипта (подробности читайте в материале You can’t create a button).
Если в слайдах содержатся только картинки, можно слегка поменять структуру:
Не забудьте добавить осмысленное значение атрибуту alt.
Для использования ссылок на страницы можно сделать следующее:
Теперь каждая ссылка ведёт на свой слайд благодаря анкору. Это специально сделано так, чтобы страница работала без JS.
Бывают слайд-шоу, комбинирующие ссылки и управление:
Отметим использование атрибутов «data» – некоторые слайд-шоу умеют вставлять картинки как фон, и эти атрибуты будут использованы в скрипте как места для связи фона и слайда.
Использование списков
Семантически верным подходом будет использование элементов списка как слайдов. В этом случае структура будет такой:
Если порядок слайдов хорошо определён (к примеру, в презентации), можно использовать нумерованные списки
Т.к. слайд-шоу будет идти справа налево, то у внешнего контейнера будет фиксированный размер, а внутренний будет шире, поскольку он содержит все слайды. Виден будет первый слайд. Это задаётся через overflow:
Стили внутреннего враппера включают:
— большая ширина
— фиксированная высота, максимальная высота слайда
— position: relative, что позволит создать перемещение слайдов
— CSS transition left, что позволит сделать движение плавным. Для простоты мы не указали все префиксы. Для этого также можно использовать CSS transformations (вместе с translation).
У слайдов есть атрибут float, чтобы они выстраивались по одной линии. Позиционируются они относительно, чтобы можно было получить их смещение слева в JS. Его мы используем для создания эффекта скольжения.
Хоть мы и задали определённую ширину, в скрипте мы сможем поменять её, умножив количество слайдов на ширину слайда. Никогда не знаешь, какая ширина может потребоваться.
Навигация осуществляется через кнопки “Предыдущий” и “Следующий”. Обнуляем их стили по умолчанию и назначаем свои:
При использовании ссылок на страницы вместо кнопок можно сделать следующие стили:
Эти классы будут назначены из скрипта динамически.
Такой подход годится для эффекта скольжения. Если мы хотим достичь эффекта исчезновения и появления, надо поменять стили, поскольку float добавляет горизонтальные отступы между слайдами. То есть, слайды на одной линии нам не нужны – нам нужна "пачка" слайдов:
Для скрытия слайдов мы используем свойство opacity, поскольку программы для чтения данных с экрана пропускают содержимое элементов, у которых установлен display: none (см. CSS in Action: Invisible Content Just for Screen Reader Users).
Благодаря контекстному позиционированию CSS мы создали "пачку" слайдов, где последний слайд в исходнике оказывается впереди других. Но нам не это нужно. Для сохранения порядка слайдов нам надо спрятать все слайды, кроме первого.
JS задействует CSS transition, меняя значение свойства opacity у текущего слайда, и обнуляя это значение у всех остальных.
Проблемы с IE9
IE9 не поддерживает CSS transitions. Изменение значения свойства мгновенно поменяет его внешний вид. Для плавности нам придётся воспользоваться jQuery. Подробности по возможным решениям читайте в этой ветке на Stack Overflow.
Код на JavaScript
Слайд-шоу без разбивки на страницы
Слайд-шоу без разбивки на страницы работают по нажатию кнопок “Следующий” и “Предыдущий”. Их можно рассматривать как операторы инкремента и декремента. Всегда есть указатель (или курсор), который будет увеличен или уменьшен каждый раз по нажатию на кнопки. Начальное его значение 0, а цель – выбирать текущий слайд так же, как выбираются элементы массива.
Поэтому, когда мы первый раз нажимаем Следующий, указатель увеличивается на 1 и мы получаем второй слайд. Нажимая на Предыдущий, мы уменьшаем указатель и получаем первый слайд. И т.д.
Вместе с указателем мы используем метод jQuery .eq() для получения текущего слайда. На чистом JS это выглядит так:
Помните — NodeList использует индексы так же, как массив. Ещё один способ выбрать текущий слайд – селекторы CSS3:
Селектор CSS3 :nth-child() считает элементы с 1, поэтому нужно добавить единичку к указателю. После выбора слайда его родительский контейнер надо сдвинуть справа налево. В jQuery можно использовать метод .animate():
В обычном JS нет метода .animate(), поэтому мы используем переходы CSS:
Теперь можно менять свойство left динамически через объект style:
Теперь надо сделать событие клика для каждого элемента управления. В jQuery можно взять метод .on(), а в чистом JS — метод addEventListener().
Также надо проверять, не достиг ли указатель границ списка – 0 для “Предыдущий” и общего количества слайдов для “Следующий”. В каждом случае надо прятать соответствующую кнопку:
А на чистом JS это выглядит так:
Примеры
Слайд-шоу с разделением на страницы
В таком слайд-шоу каждая ссылка отвечает за один слайд, поэтому указатель не нужен. Анимации не меняются – меняется способ, которым пользователь перемещается по слайдам. Для jQuery у нас будет следующий код:
В этом случае каждый анкор соответствует ID определённого слайда. В чистом JS можно использовать как его, так и атрибут data, хранящий числовой индекс слайдов внутри NodeList:
Начиная с IE10 можно управлять классами через classList:
А с IE11 атрибуты data можно получать через свойство dataset:
Примеры
Слайд-шоу с разделением на страницы и элементами управления
Такие слайд-шоу представляют некоторую сложность для кода – приходится комбинировать использование указателя и хэшей страниц. То есть, текущий слайд нужно выбирать как на основании позиции указателя, так и на основании слайда, выбранного через ссылки.
Если мы нажимаем на ссылку №3, то указатель надо установить в 2 – чтобы, нажав на "Предыдущий", мы попали на второй слайд. То есть, нужно делать синхронизацию.
Синхронизировать это можно через номерной индекс каждой ссылки в DOM. Один линк – один слайд, поэтому их индексы будут 0, 1, 2 и т.д.
На jQuery код будет такой:
Сразу видно, что изменилась видимость курсора – теперь индекс объявлен как свойство объекта слайд-шоу. Таким образом мы избегаем проблем с областью видимости, которые могут быть созданы обратными вызовами в jQuery. Теперь курсор доступен везде, и даже вне пространства имён плагина, поскольку он объявлен как публичное свойство объекта slideshow.
Метод .index() даёт числовой индекс каждой ссылки.
В чистом JS нет такого метода, так что проще использовать атрибуты данных:
Теперь мы можем соединить наши процедуры со ссылками и использовать только что созданные атрибуты данных:
Примеры
Разбираемся с размерами
Вернёмся-ка к следующему правилу CSS:
Если у нас слайдов будет много, то 9999 может не хватить. Нужно на лету подстраивать размеры для слайдов на основании ширины каждого из них и их количества.
На jQuery это просто:
Берём ширину окна и задаём ширину каждого слайда. Общая ширина внутреннего враппера получается перемножением ширины окна и количества слайдов.
Здесь начальная ширина задана шириной каждого слайда. Нужно только задать общую ширину враппера.
Теперь внутренний контейнер достаточно широк. На чистом JS это делается примерно так же:
Эффекты исчезновения
Эффекты исчезновения (fade) часто используются в слайд-шоу. Текущий слайд исчезает, и появляется следующий. У jQuery есть методы fadeIn() и fadeOut(), которые работают как со свойством opacity, так и с display, поэтому элемент удаляется из страницы по завершению анимации (display:none).
В чистом JS лучше всего работать со свойством opacity и использовать стек позиционирования CSS. Тогда изначально слайд будет видимым (opacity: 1), а другие — спрятаны (opacity:0).
Следующий набор стилей демонстрирует такой способ:
В чистом JS необходимо зарегистрировать переход CSS каждого слайда:
С jQuery для использования методов fadeIn() и fadeOut() надо менять opacity и display:
В jQuery код следующий:
При анимации opacity нужно также поменять значения этого свойства для остальных слайдов.
В JavaScript это будет:
Примеры
Медийные элементы: видео
Мы можем включать видео в слайд-шоу. Вот пример слайд-шоу с видео от Vimeo:
Видео включаются через iframe. Это такой же заменяемый inline-block, как и картинка. Заменяемый – потому, что содержимое взято из внешнего источника.
Чтобы создать полностраничное слайд-шоу, надо поменять стили следующим образом:
Примеры
Автоматические слайд-шоу
Автоматические слайд-шоу используют таймеры. При каждом обратном вызове функции по таймеру setInterval() курсор будет увеличиваться на 1 и таким образом будет выбираться следующий слайд.
Когда курсор достигнет максимального количества слайдов, его надо обнулить.
Бесконечные слайд-шоу быстро надоедают пользователям. Лучше всего останавливать анимацию, когда пользователь наводит на неё курсор мыши, и восстанавливать, когда курсор уходит.
Оба параметра метода .stop() установлены в true, т.к. нам не нужно создавать очередь анимации из нашей последовательности.
На чистом JS код становится проще. Регистрируем переход CSS для каждого слайда с определённой длительности:
И код будет следующим:
Примеры
Навигация с клавиатуры
Продвинутые слайд-шоу предлагают управление с клавиатуры, т.е. перелистывание слайдов по нажатию клавиш. Для нас это просто означает необходимость регистрации обработки события нажатия на клавиши.
Для этого мы обратимся к свойству keyCode объекта event. Оно возвращает код нажатой клавиши (список кодов).
Те события, что мы прикрепляли на кнопки "Предыдущий" и "Следующий", теперь можно прикрепить на клавиши "влево" и "вправо". jQuery :
На чистом JS вместо простого метода .trigger() придётся пользоваться dispatchEvent():
В приличных проектах так делать не принято. Нам надо было бы задать функциональность, которая обеспечивает перелистывание, в публичном методе, и затем вызывать его по клику на кнопке. Тогда если бы в другой части программы необходимо было бы реализовать эту функциональность, не пришлось бы эмулировать события DOM, а можно было бы просто вызвать этот метод.
Примеры
Обратные вызовы
Было бы неплохо уметь прикреплять к любому действию слайд-шоу некоторый код, который бы выполнялся, когда это действие производится. В этом и состоит назначение функций обратного вызова – они выполняются только, когда происходит определённое действие. Допустим, у нашего слайд-шоу есть подписи и они по умолчанию скрыты. В момент анимации нам надо показать подпись для текущего слайда или даже что-нибудь сделать с ним.
В jQuery можно создать обратный вызов так:
В этом случае обратный вызов – это функция из .animate(), которая принимает текущий слайд как аргумент. Вот, как это можно использовать:
Функция обратного вызова определена как второй параметр конструктора. Использовать её можно так:
Примеры
Внешние API
Пока наш сценарий работы прост: все слайды уже есть в документе. Если нам надо вставлять в него данные снаружи (YouTube, Vimeo, Flickr), нам нужно на лету заполнять слайды по мере получения внешнего контента.
Так как ответ со стороннего сервера может быть не немедленным, надо вставлять анимацию загрузки, чтобы показать, что процесс идёт:
Это может быть gif или анимация на чистом CSS:
Шаги будут такие:
— запросить данные извне
— спрятать загрузчик
— разобрать данные
— построить HTML
— вывести слайд-шоу
— обрабатывать слайд-шоу
Допустим, мы выбираем самые свежие видео пользователя с YouTube. jQuery:
На чистом JavaScript есть лишний шаг – создание метода получения JSON:
Затем процедуры получаются схожие:
Примеры
Заключение
Слайд-шоу – интересная возможность улучшить пользовательский опыт. Если не перебарщивать с ними, они позволят пользователю быстро найти нужный контент на сайте всего за несколько кликов. Также слайд-шоу навроде Revolution Slider или Nivo Slider демонстрируют, как можно обогатить визуальную составляющую сайта. Но для построения таких сложных проектов сначала необходимо разобраться с основами.
How to Create Presentation Slides With HTML and CSS
Kingsley Ubah Last updated Jan 22, 2022
As I sifted through the various pieces of software that are designed for creating presentation slides, it occurred to me: why learn yet another program, when I can instead use the tools that I’m already familiar with?
We can easily create beautiful and interactive presentations with HTML, CSS, and JavaScript, the three basic web technologies. In this tutorial, we’ll use modern HTML5 markup to structure our slides, we’ll use CSS to style the slides and add some effects, and we’ll use JavaScript to trigger these effects and reorganize the slides based on click events.
This tutorial is perfect for those of you new to HTML5, CSS, and JavaScript, who are looking to learn something new by building. After this you could even learn to build an HTML5 slide deck or a dynamic HTML with JavaScript PPT . The sky is the limit.
Wondering how to create an HTML slideshow? Here’s the final preview of the presentation HTML tutorial slides we’re going to build:
Have you checked out HTML tutorial slides? It’s a good example of HTML PPT slides for download.
1. Create the Directory Structure
Before we get started, let’s go ahead and create our folder structure; it should be fairly simple. We’ll need:
- index.html
- css/style.css
- js/scripts.js
This is a simple base template. Your files remain blank for the time being. We’ll fix that shortly.
2. Create the Starter Markup
Let’s begin by creating the base markup for our presentation page. Paste the following snippet into your index.html file.
From the base markup, you can tell that we are importing Font Awesome Icons, our stylesheet (style.css), and our JavaScript (index.js).
Now we’ll add the HTML markup for the actual slides inside the <div> wrapper:
We have seven slides in total, and each slide is composed of the heading section and the content section.
Only one slide will be shown at a time. This functionality is handled by the .show class, which will be implemented later on in our stylesheet. Using JavaScript, later on, we’ll dynamically add the .show class to the active slide on the page.
Below the slides, we’ll add the markup for our slide’s counter and tracker:
Later on, we’ll use JavaScript to update the text content as the user navigates through the slides.
Finally, we’ll add the slide navigator just below the counter:
This section consists of four buttons responsible for navigating left and right and switching between full-screen mode and small-screen mode. Again, we’ll use the class .show to regulate which button appears at a time.
That’ll be all for the HTML part. Now, let’s move over to styling.
3. Make It Pretty
Our next step takes place within our stylesheet. We’ll be focusing on both aesthetics and functionality here. To make each slide translate from left to right, we’ll need to target the class .show with a stylesheet to show the element.
Here’s the complete stylesheet for our project:
4. Enable Slide Navigation
Whenever we click on the left or right icon, we want the next slide or previous slide to appear. We also want to be able to toggle between full-screen mode and small-screen mode.
Furthermore, we want the slide’s counter to display the accurate slide number on every slide. All these features will be enabled with JavaScript.
Inside js/index.js, we’ll begin by storing references to the presentation wrapper, the slides, and the active slide:
Next, we’ll store references to the slide counter and both of the slide navigators (left and right icons):
Then store references to the whole presentation container and both button icons for going into full screen and small screen mode:
Now that we’re done with the references, we’ll initialize some variables with default values:
screenStatus represents the screen orientation. 0 represents a full screen mode, and 1 represents a small screen mode.
currentSlideNo represents the current slide number, which as expected is the first slide. totalSlides is initialized with 0, but this will be replaced by the actual number of our slides.
Moving the Presentation to the Next and Previous Slides
Next, we’ll add click event listeners to the left button, right button, full screen button, and small screen button:
We bind corresponding functions that will run when the click event is triggered on the corresponding element.
Here are the two functions responsible for changing the slide:
In the function moveToLeftSlide , we basically access the previous sibling element (i.e. the previous slide), remove the .show class on the current slide, and add it to that sibling. This will move the presentation to the previous slide.
We do the exact opposite of this in the function moveToRightSlide . Because nextElementSibling is the opposite of previousElementSibling , we’ll be getting the next sibling instead.
Code for Showing the Presentation in Full Screen and Small Screen
Recall that we also added click event listeners to the full screen and small screen icons. Here’s the function responsible for toggling full-screen mode:
Recall that presentationArea refers to the element that wraps the whole presentation. By adding the class full-screen to this element, we trigger the CSS that will expand it to take up the whole screen.
Since we’re now in full-screen mode, we need to show the icon for reverting back to the small screen by adding the class .show to it. Finally, we update the variable screenStatus to 1.
For the smallScreenMode function, we do the opposite—we remove the class full-screen , show the expand button icon, and update screenStatus .
Hiding the Left and Right Icons on the First and Last Slides
Now, we need to invent a way to hide the left and right buttons when we’re on the first slide and last slide respectively.
We’ll use the following two functions to achieve this:
Both these functions perform a very simple task: they check for the current slide number and hide the left and right buttons when the presentation is pointing to the first and last slide respectively.
Updating and Displaying the Slide Number
Because we’re making use of the variable currentSlideNo to hide or show the left and right button icons, we need a way to update it as the user navigates through the slides. We also need to display to the user what slide they are currently viewing.
We’ll create a function getCurrentSlideNo to update the current slide number:
We start the counter at 0, and for each slide on the page, we increment the counter. We assign the active counter (i.e. with the class .show ) to the currentSlideNo variable.
With that in place, we create another function that inserts some text into the slide counter:
So if we were on the second slide, for example, the slide’s counter would read: «2 of 6».
Putting Everything Together
To ensure that all of these functions run in harmony, we’ll run them in a newly created init function that we’ll execute at the start of the script, just below the references:
We must also run init() at the bottom of both the moveToLeftSlide and moveToRightSlide functions:
This will ensure that the init function runs every time the user navigates left or right in the presentation.
Wrapping Up
I hope this tutorial helped you understand basic web development better. Here we built a presentation slideshow from scratch using HTML, CSS, and JavaScript. It’s a great way to get into creating dynamic HTML with JavaScript PPT
With this project, you should have learned some basic HTML, CSS, and JavaScript syntax to help you with web development.