itProger Відеокурси Вёрстка адаптивного сайта на 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.

Внутри слайдера можно размещать неограниченное количество изображений, хотя перебарщивать не стоит, так как обильное количество изображений замедлит загрузку сайта. К каждому изображению можно добавлять надписи, а также кнопки, которые будут описывать фото и побуждать пользователя что-то сделать.

Матеріали для курсу

bootstrap4-slider.zip

Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт

Онлайн редактор коду

Завантаження...

Завдання до уроку

Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань

Велике завдання за курсом

Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця

Також варто подивитися