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

Содержание:

Шаг 5 – Переходы
- HTML
- CSS
Возможности современных слайдеров
Упаковка JS карусели в единый скрипт
Виды и преимущества
Smart Slider 3
JavaScript слайд шоу на базе разработанной библиотеки
Самописный JS слайдер — перспективы развития
Исходные коды и подключение слайдера к сайту
Как создать слайдер без js?
Точки фиксации
Скрипт слайдера
2. HTML5 Gallery Slideshow
Шаг 1 – HTML

Шаг 5 – Переходы

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

HTML

<ul class="s-slides">
    <li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
    <li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
    <li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
    <li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
    <li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
    <li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
    <li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS

Для создания переходов мы будем использовать @keyframes. Анимация создается припомощи постепенного изменения от одного набора стилей CSS к другому. Чтобы указать, когда анимация начнется, изменится и завершится, мы будем использовать проценты, тое-есть 0% – начало анимации и 100% – когда анимация завершена. Давайте начнем создавать эту анимацию ..

Сдвиг изображения слева

В начале анимации, изображение будет позиционированно с отрицательным значением (слева 500px), когда анимация завершается, изображение будет позиционироваться 0px слева. Установив длительность анимации до 1 секунды мы получим слайд эффект слева на право.

/* Slide Left */
 
@-webkit-keyframes 'slideLeft' {
    0% { left: -500px; }
    100% { left: 0; }
}
 
ul.s-slides li.slideLeft:target {
    z-index: 100;
 
    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Сдвиг изображения справа

/* Slide Right */
 
@-webkit-keyframes 'slideRight' {
    0% { left: 500px; }
    100% { left: 0; }
}
 
ul.s-slides li.slideRight:target {
    z-index: 100;
 
    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Сдвиг изображения сверху

/* Slide Top */
 
@-webkit-keyframes 'slideTop' {
    0% { top: -350px; }
    100% { top: 0; }
}
 
ul.s-slides li.slideTop:target {
    z-index: 100;
 
    -webkit-animation-name: slideTop;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Сдвиг изображения снизу

/* Slide Bottom */
 
@-webkit-keyframes 'slideBottom' {
    0% { top: 350px; }
    100% { top: 0; }
}
 
ul.s-slides li.slideBottom:target {
    z-index: 100;
 
    -webkit-animation-name: slideBottom;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Внутреннее увеличение изображение

Для создания зумирующего перехода, мыбудем использовать трансформирующие свойства CSS3. В начале анимации изображение будет иметь размер в 10% и к окончанию вернётся к своему оригинальному размеру. Мы поместим его с отступом в 4px сверху, чтобы исправить пробел, который появляется в нижней части.

/* Zoom In */
 
@-webkit-keyframes 'zoomIn' {
    0% { -webkit-transform: scale(0.1); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.zoomIn:target {
    z-index: 100;
    top: 4px;
 
    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Вращение и увеличение изображение

/* Rotate */
 
@-webkit-keyframes 'rotate' {
    0% { -webkit-transform: rotate(-360deg) scale(0.1); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.rotate:target {
    z-index: 100;
    top: 4px;
 
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Внешнее увеличение изображение

/* Zoom Out */
 
@-webkit-keyframes 'zoomOut' {
    0% { -webkit-transform: scale(2); }
    100% { -webkit-transform: none; }
}
 
ul.s-slides li.zoomOut:target {
    z-index: 100;
 
    -webkit-animation-name: zoomOut;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

Возможности современных слайдеров

Как выбрать и создать цветовую схему для сайта

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

Его задачи:

разместить ссылки на весь ключевой контент внутри одного блока главной страницы;
создать гармоничный баланс между размещёнными медиафайлами и SEO-элементами;
удовлетворить все пожелания целевой аудитории сайта (и владельцев ресурса).

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

Современные технологии позволяют безгранично расширять функционал слайдера — всё зависит лишь от вашего желания и потребностей. Изображения могут сменяться любым способом, который только можно себе вообразить — от классического до так называемого «аккордеона» и т.п. Вместо картинки или текста на слайде может быть видео. Также есть возможность оборудовать слайдеры таймером, поставить кнопки паузы и запуска слайд-шоу и многое другое.

Упаковка JS карусели в единый скрипт

Как провести аудит сайта самостоятельно [руководство по сервису «анализа сайта»]

Всё, слайдер на JavaScript готов и подключен. Я лично рекомендую использовать данный вариант на практике, если он вам вообще пригодится

Для ускорения работы его, кстати, можете ещё дополнительно сжать статические компоненты: CSS, HTML и JavaScript файлы. Я не стал этого делать и предлагать вам минифицированный код, потому что систем сборок фронтэнда сейчас очень много: Gulp, Grunt, Webpack и другие. И у каждой из них свои алгоритмы сжатия и подключения файлов.

К тому же, минифицированные результаты на разных ОС могут работать по-разному. В общем, причин много.

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

Как я писал в самом начале, для решения поставленной мне изначально задачи нужно было получить единый JS файл для корректного использования моего слайдера через сторонний сервис на сайте. По этой причине я, собственно говоря, и не стал пользоваться готовыми сторонними библиотеками.

Так вот, в завершение своего сегодняшнего повествования я решил поделиться с вами финальной версией своей JavaScript карусели, которую я использовал на практике. Возможно, кому-то данный способ будет полезен. Он также пригодится тем, кто будет подключать предоставленную мною библиотеку через системы сборки Webpack, Gulp, Grunt и при этом столкнётся с проблемой правильности файловых путей.

Тогда вариант единого скрипта JavaScript карусели вам придётся как нельзя кстати, т.к. весь контент будет содержаться прямо в нём, в том числе и HTML/CSS код, который в случае библиотеки хранится в отдельных файлах.

Скрипт в моём случае состоит из двух частей. В первой части располагалось содержимое файла popupSlider.js, которое я второй раз не буду приводить. Вставьте его самостоятельно, убрав из кода класса описание метода loadStatic() и его вызов, т.к. они нам не понадобятся.

Вторая же часть единого скрипта JavaScript слайдера для сайта представляет собой обработчик события DOMContentLoaded, которое наступает при загрузке содержимого страницы.

Там у нас будет происходить добавление на страницу HTML/CSS кода JS карусели и создание объекта класса Slider, что равносильно активации самого слайдера.

Схематично код выглядит следующим образом:

/* содержимое popupSlider.js без описания метода loadStatic() и его вызова */

document.addEventListener('DOMContentLoaded', function(){
    var str = '\
         <style>\
             /*css код*/
         </style>\
         /* html код */
         ';

    var div = document.createElement('div');
    div.innerHTML = str;
    document.body.appendChild(div);

    var aSlider = new Slider("#slider");

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

Если у вас таких сложностей нет, то можете ничего не менять, но не забыть скопировать каталоги slides и controls библиотеки на сервер и указать правильные пути к ним.

Виды и преимущества

Адаптивный и мобильный дизайн с css3 media queries

Слайдеры – это тонкая пленка с нанесенным на нее изображением для дизайна ногтей. Позволяет создать яркий нейл-дизайн даже без художественных навыков и с минимальными временными затратами.

Виды наклеек:

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

Помимо разновидностей по типу рисунка, выделяется еще 2 вида:

плоские – ложатся на ноготь плотно, не образую рельефа и выпуклостей;
3D – объемные рисунки с выраженным рельефом.

Все разновидности располагают на картонной подложке, а отделить их можно только намочив нужный фрагмент теплой водой. Ниже рассмотрим пошаговую инструкцию, как создать маникюр со слайдер-дизайном.

Преимущества:

простота использования. Готовыми рисунками может пользоваться даже новичок – главное аккуратно отделить изображение от основы и перенести на ноготь;
скорость. Перенести готовый рисунок намного быстрее, чем вырисовывать его кистью;
большой выбор. Ассортимент слайдеров настолько широк, что навсегда решает проблему выдумки рисунка. Дело остается за малым – выбрать изображение из сотен представленных.

Недостатки:

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

тонкая пленка рвется. Малейшая неаккуратность или резкое движение и пленка рвется

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

Отличие от классических наклеек

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

Субъективным, но все же весомым отличием является ассортимент. В продаже все реже встречаются классические клеевые наклейки, а ассортимент слайдеров постоянно растет.

Smart Slider 3

На мой взгляд, это самый интересный и многофункциональный слайдер из всех бесплатных плагинов для WordPress на сегодняшний день!

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

Основные особенности Smart Slider 3:

Приятный интерфейс и неограниченное количество слайдеров и слайдов
Возможность добавления слоёв на слайд
Поддержка шаблонов. Вы можете создавать и сохранять свои шаблоны для слайдов или загружать уже готовые из библиотеки Smart Slider
Настройка фона. Можно использовать цвета, задавать градиентные переходы, фоновые изображения и регулировать прозрачность
Можно дублировать слайдер и слайды
Расширенные настройки навигации. Можно выбирать изображения для кнопок навигации, их положение на слайде, цвет (обычный и при наведении), прозрачность и смещение
Возможность добавления миниатюр, для слайдов
Наличие интересных и оригинальных теней
Задание определённого размера слайд шоу или растягивание на всю ширину
Наличие вертикальной и горизонтальной прокрутки для слайдов, а также поддержка сенсорных экранов и управления колёсиком мышки
Можно настраивать анимации для фона и слайдов. Smart Slider 3 содержит довольно неплохой набор плавных анимаций с возможностью их предпросмотра
Задание размеров слайдера для мобильных устройств
Настройка автопрокрутки и скорости смены слайдов
Возможность оптимизации изображений. Такой функцией далеко не каждый платный плагин может похвастаться, а здесь это есть в функционале бесплатной версии!

Пожалуй, это основные его особенности, но далеко не все.

JavaScript слайд шоу на базе разработанной библиотеки

Иногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.

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

Для автоматической прокрутки слайдов я добавил в самый конец своего класса следующий метод:

slideShow: function (timeout) {
    var sliderCount = this.links.length;
    var self = this;

    this.slideCycle = setInterval(function () {
        var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
        var slideId = parseInt(currentSlideNumber, 10) + 1;
        self.slide(document.querySelector(''));
    }, timeout);
}

Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.

Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().

Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.

Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):

self.slideShow(2000);

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

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

При работе с различными библиотеками JS каруселей картинок и отзывов я заметил, что данную практику разработчики активно применяют, но с некоторым дополнением. Во всех увиденных мною решениях автоматический показ слайдов прерывается, если пользователь сделал ручное переключение. Поэтому я решил сделать подобное и в своей библиотеке.

Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.

В итоге, получился следующий код, который я решил не оформлять отдельным методом:

clearInterval(self.slideCycle);

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

link.addEventListener("click", function (e) {...});

self.prevBtn.addEventListener('click', function (e) {...});

self.nextBtn.addEventListener('click', function (e) {...});

Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.

Самописный JS слайдер — перспективы развития

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

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

Так что если вам, как и мне, нужна будет кодовая база для экспериментов и вы располагаете хоть каким-то лишним свободным временем — копируйте себе код описанного мною JavaScript слайдера или присоединяйтесь к контрибьюторам на GitHub. Репозиторий открытый, а ссылку на него я предоставил в начале статьи.

Если вы хотите прокачать свои фронтэнд скилы на моём творении, могу вам даже подкинуть небольшой список правок и доработок, в которых нуждается код и которые, возможно, будут интересны вам в плане их реализации:

сделать внешний конфиг, чтобы можно было удобно настраивать слайдер;
сделать возможность встраивания слайдера внутрь страницы (сейчас оформлен только в виде попапа);
асинхронная загрузка HTML кода (сейчас сделана синхронная, которая многими браузерами помечается как устаревший вариант);
оформить библиотеку в виде пакета, NPM, Bower или другого пакета, чтобы его можно было устанавливать и оперировать зависимостями с помощью пакетных менеджеров;
сделать вёрстку адаптивной для использования JS карусели на различных устройствах;
сделать переключение слайдов по событию Swipe для мобильных пользователей.

Прошу мой код строго не судить, т.к., я как я уже говорил, Frontend спецом я себя не считаю и не являюсь. Также я открыт для всех ваших замечаний по стилю кодирования и надеюсь, что смогу что-то у вас перенять, а вы — у меня, т.е. выполнить основное предназначение разработки и поддержки OpenSource продукции.

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

У меня всё! Всем добра!

Исходные коды и подключение слайдера к сайту

Проект слайдера расположен на GitHub по этому адресу. Данный слайдер распространяется под лицензией MIT. Его можно использовать бесплатно как в личных проектах, так и в коммерческих. Поблагодарить автора и поддержать дальнейшее развитие слайдера можно на этой страничке.

Основные характеристики слайдера:

адаптивный;
лёгкий (без jQuery);
простой (с минимальным набором функций);
наличие механизма автоматического смена слайдов через определенные промежутки времени;
универсальный (можно использовать для текстовой информации, изображений, отзывов, товаров и др.).

Подключение слайдера к странице осуществляется посредством выполнения следующих действий:

вставить в необходимое место html код слайдера;
подключить файл со стилями или добавить их в существующий файл; также стили можно вставить прямо на страницу;
подключить js-скрипт слайдера или вставить его в существующий файл; также код можно добавить прямо на страницу.

Демо слайдера расположено на этой странице.

Как создать слайдер без js?

В первую очередь мы должны создать html часть, для этого мы должны
определиться, сколько слайдов мы хотим реализовать. Так как мы не используем js, то div тегов должно быть столько сколько
картинок.

Кроме того, к этим div, будут прилагаться еще две вещи: radio button и label. Без
них не получится, а все потому, что мы должны выбрать конкретно определенный объект,
ну и конечно же должна быть какая-то навигация.

Вот так наш слайдер выглядит полностью:

Я так же залил и себе на сайт,
если хочется от клацать это дело в полной мере.

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

Точки фиксации

Как заметил Майкл Шарнагль, некоторые браузеры, включая Safari и Firefox, поддерживают простой CSS-метод фиксации слайдов при прокрутке или использовании клавиш со стрелками. Так как Safari не поддерживает (уже поддерживается с , прим. переводчика), то это один из способов сделать удобнее пользователям этого браузера. Мешанина из проприетарных и стандартных свойств ниже: вот что сработало в нашем случае.

 {   -webkit-overflow-scrolling: touch;  -webkit-scroll-snap-type: mandatory;  -ms-scroll-snap-type: mandatory;  scroll-snap-type: mandatory;  -webkit-scroll-snap-points-x: repeat(100%);  -ms-scroll-snap-points-x: repeat(100%);  scroll-snap-points-x: repeat(100%);}

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

Скрипт слайдера

Пожалуй, наиболее сложный вариант установки слайдера. Тем не менее, многие веб-дизайнеры предпочитают делать всё своими руками. Благодаря такому подходу каждый свеженаписанный слайдер получается уникальным и ни на что не похожим.

Готовые решения выглядят стильно и необычно.

Вы можете отыскать весьма нестандартные примеры. Но при этом каждый из них по-своему интересен.

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

Например, это элементарный плагин Coin Slider. Он не требует специальных знаний для установки. Простой функционал является его основным достоинством.

А вот Slideshow Gallery позволяет создавать слайдеры с превью. Если кликнуть на картинку, она автоматически увеличится.

2. HTML5 Gallery Slideshow

HTML5 Gallery Slideshow — отличный выбор для демонстрации изображений и текста в виде слайдера. Главным преимуществом продаж карусели является ее невероятная простота в использовании. После внедрения в необходимое место, она адаптируется по размеру родительского контейнера, то есть к тегу div или другому тегу HTML.

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

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

Шаг 1 – HTML

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

<div class="slider-wrapper">
<ul class="s-thumbs">
    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>
<ul class="s-slides">
    <li id="slide-1"><img src="img/slide1.png" alt="" /></li>
    <li id="slide-2"><img src="img/slide2.png" alt="" /></li>
    <li id="slide-3"><img src="img/slide3.png" alt="" /></li>
    <li id="slide-4"><img src="img/slide4.png" alt="" /></li>
    <li id="slide-5"><img src="img/slide5.png" alt="" /></li>
    <li id="slide-6"><img src="img/slide6.png" alt="" /></li>
    <li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>