Уроки Bootstrap 4

#3 - Слайдер изображений

#3 - Слайдер изображений

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

Видеоурок

Раньше на сайтах не рекомендовали использовать слайдеры, так как они были разработаны на языке 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 месяца

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Создание блога на Ruby On Rails
8 уроков
Уроки Python Django / Создание сайта
12 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Комментарии
Добавить комментарий

Пока комментариев нет