Проект: Создание карусели/слайдера для изображений с помощью Javascript

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

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

Ваше задание

Создайте страничку с простой каруселью. По бокам должны находиться стрелочки, перемещающие изображения вперед и назад. Каждые 5 секунд картинка должна прокручиваться вперед. Внизу должен находиться ряд кружочков, каждый из которых указывает на изображение (и при нажатии на них должно открываться соответствующее изображение).

Не тратьте много времени на подгонку размеров изображений - важнее заставить их двигаться.

  1. Создайте репозиторий Github Repo для проекта. При необходимости, следуйте инструкциям здесь if you need help.
  2. Создайте пустой документ HTML.
  3. Подумайте как расположить элементы на странице. Какие объекты и функции вам понадобятся? Несколько минут раздумий могут избавить от часа бесполезной работы с кодом. Лучше всего расписать решение на бумаге перед тем, как вообще садиться за компьютер.
  4. Создайте статический HTML для карусели.
  5. Создайте очень широкий div, который будет содержать отдельные "слайды" каждого изображения. При правильном расположении этого div внутри контейнера (работающего как "окно" для изображения), вы сможете выбирать, какой слайд будет виден в настоящий момент.
  6. Как только вы правильно разместили слайдер, создайте функции для "предыдущего" и "следующего" слайда. Используя несложные эффекты, сделайте перемещение картинки плавным.
  7. Создайте стрелки, задействующие эти функции и проверьте, как они работают.
  8. Добавтье навигацию в виде точек внизу слайдов. Используя CSS, сделайте ряд пустых кружков сразу под слайдами. Каждый кружок отражает слайд, так что при смене изображения, его соответствующий кружок заполняется, и вы можете сказать, в каком месте слайдшоу вы находитесь. Сделайте ссылку на соответствующий слайд с каждого кружочка.
  9. Добавьте таймаут смены слайдов в 5 секунд.
  10. Опробуйте результат!
  11. Выложите проект на Github.

Дополнительно (по желанию)

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

Этот красивый функционал будет неплохо смотреться на вашем личном сайте!

Решения студентов

Дополнительные ресурсы

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

Поделиться уроком: