#3 - Слайдер изображений
Видеоурок
Раньше на сайтах не рекомендовали использовать слайдеры, так как они были разработаны на языке JavaScript и могли значительно замедлить общую загрузку страницы.
Наш слайдер написан на основе фреймворка Bootstrap, а это означает что он реализован лишь за счёт CSS классов. Такой слайдер не будет сильно тормозить загрузку страницы, а соответсвенно его можно спокойно использовать для веб сайта.
Чтобы создать слайдер на Bootstrap вы можете воспользоваться кодом ниже:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Здесь используются два основных класса для слайдера: carousel
и slide
.
Внутри слайдера можно размещать неограниченное количество изображений, хотя перебарщивать не стоит, так как обильное количество изображений замедлит загрузку сайта. К каждому изображению можно добавлять надписи, а также кнопки, которые будут описывать фото и побуждать пользователя что-то сделать.
Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Онлайн редактор кода
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Также стоит посмотреть