Как сделать слайдер на js
Добавил пользователь Skiper Обновлено: 04.10.2024
В этом уроке для веб разработчиков мы продемонстрируем создание слайдера на HTML, CSS, и JavaScript (jQuery) и добьёмся, чтобы он работал во всех браузерах (с активированным и дезактивированным JavaScript).
Начало работы
Одним из самых важных аспектов работы над новым проектом, является создание HTML структуры. Мы должны добиться того, чтобы данный слайдер одинаково отображался во всех браузерах и работал даже на тех, где отключен JavaScript.
Блок 1: HTML
Вы можете заметить, что в приведённом фрагменте кода нет ничего связанного с элементами контроля нашего слайдера. Мы их добавим в DOM позже, посредством JavaScript скрипта. Если их добавить сейчас, то они будут смущать тех, кто отключает поддержку CSS или JavaScript.
Вариант 1: Полноценный слайдер
Заметка: Проверяйте работу после каждого изменения. Если вы занимаетесь разработкой чего-то нового, то всегда тестируйте работу проведённых изменений, будь то даже изменение HTML структуры. Вы можете использовать специальный инструмент WebAnywhere для тестирования содержания.
Стилизуем слайдер
Следующим действием мы оформим наш дизайн и предусмотрим несколько вещей для тех пользователей, которые отключают JavaScript.
Нам необходимо немного уменьшить ширину блока с классом .slide на 20px для того, чтобы появилось место для области прокрутки слайдов для тех, у кого отключен JavaScript.
Блок 3: CSS класс .slide
С отключённым JavaScript, наш контент всё равно доступен для пользователей; благодаря прокрутке они могут просматривать слайды.
Вариант 2: Слайдер без JavaScript
В качестве альтернативы, вы можете добавить классу .slide дополнительное свойство float:left; для того чтобы пользователи без JavaScript могли прокручивать слайды горизонтально.
Стрелки вправо и влево
Для того чтобы добиться большей производительности, мы добавим элементы контроля над слайдером посредством изменения DOM при помощи jQuery.
Элементы будут представлять из себя span элемент, поэтому мы назначили свойству cursor значение pointer для создания эффекта наведения мыши на кнопку. Так же мы используем свойство text-indent для того, чтобы спрятать текст.
Блок 4: Элементы контроля
Самое интересное… JavaScript
После того, как мы подготовили наш HTML и CSS, самое время заняться основным скриптом. Для создания анимации и прочих фишек мы будем использовать библиотеку jQuery.
Теория
В конце концов, мы вставим элементы контроля (с классом .control) для того, чтобы пользователи могли переключать слайды; это мы сделаем средствами JavaScript, чтобы тем, у кого он отключён, элементы контроля не отобразились.
Вашему вниманию я представляю код JavaScript детальное описание которого последует ниже.
Блок 5: Главный скрипт jQuery
Создаём объекты
В первую очередь, мы инициализируем некоторые переменные в самом начале скрипта.
currentPosition будет содержать текущую позицию. slideshow.slideWidth - это ширина каждого блока .slide, которая равна 560px. Я предпочёл объявить объект для селектора $('.slide'), для того чтобы код смотрелся немного чище, но вы можете поступить по-другому и в дальнейшем использовать запись ($('.slide')).
И наконец, мы определяем количество слайдов в нашем слайдере, используя метод .length.
Блок 6: Переменные и константы
Убираем прокрутку
Когда скрипт запустится для тех, у кого включён JavaScript, мы уберём элемент прокрутки, установив значение hidden элементу slidesContainer, и это будет заменять переполнение overflow:auto CSS (смотри Блок 3).
Блок 7: Изменения значения свойства CSS overflow на hidden
Вставка div в DOM
Мы будем использовать свойство margin для перемещения слайдов влево и вправо (но чуть позже). Для этого нам необходимо создать специальный блок, в который будут вписаны все блоки с классом .slide, совпадающие с ним по ширине и высоте. Изменяя значение внешних отступов для этого элемента, мы создадим эффект перемещения в разные стороны.
Утилизируем слайды при помощи JavaScript
Если JavaScript включён, мы хотим расположить слайды друг за другом. Также каждому из низ мы зададим фиксированную ширину в 560px – таков и будет размер нашего слайдера.
Мы можем совместить метод .css с методом .wrapAll(), который мы использовали в Блоке 8.
Блок 10: Присвоение .slide блокам overflow:hidden
Вставка стрелок в DOM
Мы вставим необходимые элементы, посредством манипулирования элементами DOM; таким образом, обеспечим пользователям, которые отключают JavaScript и другим устройствам простую картинку без всякого функционала. Так у них не появится никаких лишних вопросов.
Блок 11: Вставка элементов контроля в DOM
Управления стрелками посредством функций
Для того чтобы иметь возможность управлять элементами контроля, мы создадим функцию с именем manageControls, которая скрывает и показывает правую и левую стрелку в зависимости от того, в какой части слайдера мы сейчас находимся.
Если мы смотрим первый слайд, то нам необходимо, по понятным причинам, спрятать левую стрелку. Когда мы будем на правом слайде, то нам нет никакого резона отображать правую стрелку нашего слайдера. Показ и скрытие данных элементов мы осуществим при помощи jQuery методов .hide() и .show(), которые предназначены специально для подобных целей.
Блок 12: функция manageControls()
Вызываем manageControls(), когда DOM готов
Когда наш скрипт окончательно загрузится, мы должны вызывать метод manageControls(), для того чтобы спрятать левую стрелку контроля. Это просто, мы передаём аргумент currentPosition, который должен быть равен 0.
Блок 13: вызов manageControls() при полной загрузке документа
Отлавливаем события
Всё что нам осталось сделать для нашего jQuery слайдера, так это создать функционал для отлавливания кликов по элементам контроля. Этот функционал будет активироваться в том случае, если пользователь нажмёт на одну из стрелок: правую или левую.
Блок 14: Отлавливаем клик на класс .control
Обновляем значение для currentPosition
Блок 15: Новое значение для currentPosition
Вызов manageControls() после обновления значения currentPosition
После того, как мы определи значение переменной currentPosition, снова вызываем manageControls(), для того чтобы скрыть и отобразить инструменты контроля над слайдами.
Блок 16: Вызов manageControls() внутри метода .bind
Анимируем слайды
Блок 17: Используем метод .animate при смене CSS свойства margin-left
Заключение
В этом уроке, мы создали простой слайдер при помощи HTML, CSS, и JavaScript (jQuery). Также мы использовали специальные техники, которые позволят слайдеру работать с отключёнными CSS и JavaScript. Спасибо за внимание.
5 последних уроков рубрики "jQuery"
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Также, для достижения подобной анимации нам понадобилась библиотека anime.js. Давайте для начала начнем с идеи, и как к этому пришли. Смотрите также бесплатные и не только шаблоны для вашего сайта:
Оригинальная идея
Источником вдохновения для такого рода эффектов стал разработанная Aleksandrom Saunki:
Работа с библиотекой Pieces
Вся подробная документация о библиотеке Pieces находится в репозитории Github. Но в любом случае, давайте быстро рассмотрим некоторые основные возможности, чтобы иметь вы понимали, о чем идет речь.
Как вы можете видеть на изображении выше основной шаблон будет разделен на несколько частей, которые могут отличаться по размеру и позиции. Чтобы увидеть все возможные варианты, я рекомендую вам ознакомиться с документацией на Github.
На протяжении всего урока мы будем объяснять каждый фрагмент кода, так что вы можете узнать, как реализовать свои собственные анимации с помощью данной библиотеки. Давайте начнем!
Шаг 1. HTML
Прежде чем начать писать код Javascript, давайте посмотрим, как мы определили контейнер HTML для нашего слайдера. Разметка довольно проста, так как у нас есть несколько слайдов с соответствующим изображением и текстом, элемент canvas для анимации и кнопки для навигации по слайдеру.
Сегодня в видеоруководстве я покажу вам как создать "сплитскрин" слайдер, используя JavaScript. Вдохновением послужила страница с Corsair website; давайте посмотрим, как мы можем создать свой собственный слайдер.
Что мы будем делать
Давайте посмотрим на демо того, что мы будем делать. Посмотрите на проект на CodePen, либо скачайте исходники с GitHub.
Посмотрите видео
1. Создаем панели
Как это сделать? Создайте две отдельные панели в вашем HTML. Я использовал div элемент с классом panel . У первой панели задал также класс bottom , у другой – top . В каждой панели также есть еще один div для контента.
Поместите ваш контент (изображения, заголовки и т.д.) в div с классом content .
Как только сделаете, добавьте еще один div в качестве переключателя перед закрывающим тегом splitview .
2. Добавьте стилей для расположения панелей
Первыми важными стилями будут те, которые разместят наши панели одну над другой, а также сделают их подвижными.
Задайте стили каждой панели отдельно – для top и bottom , например задав background-color и украсьте их внутри как захотите. Стоит только помнить о z-index, чтобы расположить их в правильном порядке.
3. Примените простую маску
Теперь наша верхняя панель полностью перекрывает нижнюю, так что давайте поэкспериментируем с шириной:
У вас должно получиться что-то похожее верхняя панель будет достигать не более половины ( 50vw ) страницы:
4. Подключаем JavaScript
Теперь, когда все работает в нашем CSS, давайте займемся JavaScript и посмотрим, как мы сможем анимировать наш слайдер. Начнем с запуска функции только при полной загрузке DOM.
Весь остальной код будет находиться внутри этой функции, внутри скобок.
Затем обозначим переменные, указав родительский элемент, верхнюю панель (она единственная у нас будет изменяться) и элемент, который будет происходить смена.
5. Делаем переключатель
Прежде чем приступить, давайте зададим стили переключателю.
Это небольшой блок в 5pxпомещенный в середину видимой области. Его z-index – 3, убедитесь, что он находится на самом верху.
Заставляем его перемещаться
Мы хотим заполучить координаты курсора мыши по оси x, когда она перемещается внутри контейнера. Затем мы хотим, чтобы переключатель перемещался и задавал ширину верхней панели сообразно этим координатам.
Начнем с приемника событий на родительском элементе, затем установим свойство left нашего переключателя равным значению event.clientX .
Этот код позаботится о перемещении переключателя, теперь давайте займемся размерами панели, приравняв их к event. clientX .
Готово!
Мы подошли к концу; при помощи такого простого CSS и JavaScript мы создали прекрасный эффект сплитскрин слайдера. Чтобы сделать все еще лучше, чем я занимаюсь в видео, мы можем изменить и сам переключатель – взгляните на демо на CodePen!
Самый простой слайдер на чистом javascript с очень простым кодом, который работает во всех шаблонах, на которых я его тестировал.
Картинок можно добавлять сколько угодно. Все они будут появляться с заданным интервалом.
function nextCarousel() carousels[currentCarousel].className = 'carousel';
currentCarousel = (currentCarousel+1)%carousels.length;
carousels[currentCarousel].className = 'carousel demonstration';
>
/script >
.carousel position : absolute ;
left : 0 ;
top : 0 ;
opacity : 0 ;
transition : opacity 3s ; /* Время появления картинки */
>
.demonstration opacity : 1 ;
>
Желаю творческих успехов.
А ну-ка, что там ещё интересного
Не помучаться, а пошевелить мозгами, что вы и сделали. Молодец.
Без конкретной ширины и высоты получается кака…
Ваня, а ты разве не видишь что он работает?
Код в примере так как он написан — не будет работать. У автора нет понимания основ JS
всем привет я наверное не один такой . вставил код js все огонь работает, но мне понадобилось несколько каруселек и тут фиг-вам, работают по очереди.
Подскажи,что поменять в коде?
Пользуйтесь на здоровье
Уважаемый автор. Весьма был доволен Вашим кодом для простого слайдера.
С уважением, Сергей, 67 лет, г. Москва.
Попробуйте вот в таком виде. Я кое что исправил.
По поводу JS, вам лучше вот сюда. Я наверно так подробно не смогу всё объяснить так как сам изучаю его методом тыка. Продуктивный метод между прочим.
Здравствуйте, Сергей. Мой первый сайт не в WordPress, поэтому шорткод мне не нужен. Я пишу сайт вручную. Вставила туда карусель от Вас на css. Всё отлично работает. Попробовала на JS — ничего. Ну рано, так рано. Всё равно спасибо, много интересного на Вашем сайте.
Наверное Наташ чуть рановато. Эта карусель сделана для песочницы, т.е чистый код. В шаблоне можно попробовать вставить весь код, и css и html и script в шёрткод, и вывести в нужном месте. Если же вставлять этот слайдер в шапке, то можно опять попробовать шёрткод в хеадер, или html в header, scc в style, а скрипт через функцию в functions.php. Короче дело ясное, что дело тёмное? Так для каждого шаблона ещё будут нюансы в которых сначала надо разобраться. Попробуйте через шёрткод, если не получится, оставьте до приобретения более основательных знаний, а то просто не поймёте меня. Вообще вставить в ручную карусель в шаблон под силу только не плохому программисту.
Все скопировала, css в файл css, картинки в контент, JavaScript в html файл в .
Ничего не заработало. Картинки лежат в контенте спокойненько. Ничего не движется.
Что не так? (делаю первый сайт, поэтому мало что понимаю, в джаваскрипт вообще ничего)
Читайте также: