Как сделать простой слайдер изображений с HTML, CSS и jQuery

Слайд-шоу, слайдеры изображений, волшебные ящики для смены картинок: как бы вы их ни называли, шаблон используется во всем Интернете, так что почти на каждом сайте есть такой. Если вы веб-разработчик, придет время, когда вам, возможно, придется создать его самостоятельно. Имея это в виду, давайте посмотрим, как мы можем создать простой слайдер изображений, используя HTML, CSS и jQuery.

HTML

Мы начнем с создания элемента контейнера, который имеет container класса. Внутри этого лежат наши образы. Изображения обернуты тегами div, поэтому слайды можно превратить в ссылки, или контент, отличный от изображений, можно использовать в качестве слайда. Первый контейнерный div имеет встроенный стиль, который гарантирует, что первое изображение в слайдере будет видно при загрузке страницы. Есть также два элемента кнопки, которые используются для ручного переключения между слайдами по запросу пользователя.

CSS

Здесь мы устанавливаем ширину ползунка изображения, элементов контейнера и изображений внутри них. Важно отметить, что все наши контейнерные элементы настроены для display: none; , Если бы они не были, все наши изображения были бы видны одновременно. Мы будем использовать JavaScript, чтобы установить контейнер div для display: inline-block; в то время как остальные остаются скрытыми.

JavaScript

Для начала нам нужно определить несколько важных переменных. Первая переменная — currentIndex , и она установлена ​​в 0. Вторая переменная — это items , которая установлена ​​в $('.container div') . Это вернет список контейнерных элементов с изображениями внутри них. Третья переменная это itemAmt , которая установлена ​​на длину нашей переменной items . Эта последняя переменная дает нам общее количество слайдов в нашем слайдере изображений.

Затем мы создаем функцию с именем ‘ cycleItems ‘. Эта функция будет использоваться для отображения правильного изображения, при этом остальные будут скрыты. Внутри этой функции мы создаем переменную с именем item . Эта переменная установлена ​​в $('.container div').eq(currentIndex) . Метод eq предоставляемый jQuery, принимает целое число и нацеливается на первый элемент, возвращаемый $('.container div') который соответствует целому числу. Поэтому, если currentIndex равен 0, $('.container div').eq(currentIndex) на первый контейнер изображения в нашем слайдере изображений. Следующее, что нужно сделать внутри нашей функции cycleItems, это скрыть все наши div-контейнеры изображений и установить item для display: inline-block; ,

Чтобы убедиться, что наши изображения вращаются автоматически, нам нужно предоставить способ непрерывного вызова нашей функции cycleItems по истечении определенного времени. Мы делаем это, создавая другую переменную с именем autoSlide . Эта переменная хранит функцию setInterval, которая занимает задержку 3000 миллисекунд или три секунды. Внутри этой функции мы увеличиваем переменную currentIndex на единицу, так что $('.container div').eq(currentIndex) всегда будет ссылаться на следующий контейнерный div. Затем мы определяем очень важное утверждение «если». Это утверждение говорит, что если наша переменная currentIndex больше, чем общее количество изображений в нашем ползунке, сбросьте переменную обратно в ноль. Если бы у нас не было этого оператора if, мы бы не смогли просмотреть наш список изображений. После оператора if мы вызываем нашу функцию cycleItems.

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

Демо