0

Слайдер на Bootstrap 4

 

Carousel (карусель) - це елемент інтерфейсу для демонстрації на сайті серії зображень (слайдів). Кожне зображення (слайд) демонструється зазвичай кілька секунд, поки не зміниться наступним. Зміна зображення (слайд) може здійснюватися як автоматично через рівні проміжки часу, так і вручну.

Слайд в Bootstrap каруселі може бути представлений не тільки зображенням, а й текстовим контентом. Крім цього при створенні слайда можна використовувати розмітку.

За замовчуванням карусель Bootstrap починає працювати при завантаженні сторінки.

Slaider Bootstrap 4 доступний  за посиланням: Карусель

Є декілька типів  каруселі, які створюються у блоці з унікальним ідентифікатором:

1.  Тільки слайди id="carouselSlidesOnly"

2. З елементами управління у вигляді кнопок prev/next id="carouselControls"



3. З індикаторами id="carouselIndicators"


4. З надписами на слайдах id="carouselCaptions"

5. З склеюванням переходу між зображеннями id="carouselFade"

Порядок створення каруселі на вебсторінці

1. створити блок     самого слайдера з унікальним ідентифікатором та класом слайдера class="carousel slide" і атрибутом data-ride="carousel", який запускає автоматичну зміну слайдів каруселі після завантаження сторінки.

2. Створити дочірній блок у блоці слайдера з класом class="carousel-inner" у якому будуть вкладені елементи (зображення) слайдеру

3. Елементи  слайдера (зображення) розміщуються у блоці з класом class="carousel-item. Першому елементу (зображенню потрібно обовязково встановити клас active, інакше карусель не буде видно. 
4. далі  створити код вставки зображення і для тегу img додати класи  d-block (зображення стане блочним елементом) та клас w-100 - 100% ширина зображення
Повторити блоки з вкладеними зображеннями потрібну кількість разів, але прибравши клас active

<div id="carouselSlidesOnly" 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>

5. Створити кнопки управління під блоком з зображеннями. Важливо! Карусель з елементами управління і (або) з індикаторами слайдів повинна мати id. А елементи керування та індикатори слайдів повинні мати атрибут data-target (або href для посилань), значення якого повинно вказувати на карусель (тобто складатися з # і id). 

Ім'я id блоку слайдера має співпадати з іменем ідентифікатора атрибуту href

<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

Поведінка кнопок «Попередній» і «Наступний» визначається в каруселі за допомогою атрибута data-slide. Значення prev даного атрибута пов'язує з кнопкою певні дії, за допомогою яких вона буде здійснювати зміну поточного слайда на попередній. Значення next пов'язує з кнопкою відповідно інші дії, які будуть виконувати зміну поточного слайда на наступний.

6. Додати  індикатори до слайдера можна перед блоком з зображеннями у вигляді списку:

<ol class="carousel-indicators">
    <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselIndicators" data-slide-to="1"></li>
    <li data-target="#carouselIndicators" data-slide-to="2"></li>
  </ol>

Атрибут data-slide-to додає до каруселі можливість додаткової навігації по слайдах за допомогою індикаторів. Атрибут data-slide-to як значення містить порядковий номер (індекс) слайда. Відлік слайдів в каруселі ведеться з нуля. Якщо необхідно щоб при кліці на індикатор користувач перейшов, на третій слайд, то до індикатора необхідно додати атрибут data-slide-to зі значенням 2.

6. Додавання написів до слайдів каруселі. До слайдів можна додати написи. Здійснюється це за допомогою додавання до кожного слайду, деякого елемента, наприклад, div, з класом carousel-caption. При необхідності ці написи можна за допомогою класів display відображати на одних екранах і приховувати на інших.


Завдання: у проекті "Portfolio" видалити блок jumbotron , вставити замість нього блок  каруселі з фотоафіями,  кнопками управління, індикаторами та   надписами як на зразку