Содержание страницы
домикГлавная / Элементы html и css / Карусель на бутстрап
галерея на бутстрапПосле того, как разобрались с меню на бутстрап, перейдём к фотогалерее - карусель бутстрап.

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

Пример галереи на бутстрап

карусели бутстрап
Для просмотра работы карусели бутстрап в полном объёме скачайте архив и откройте файл index.html в вашем браузере. А для редактирования откройте этот же файл в текстовом редакторе, где замените фото на свои картинки, пропишите заголовки и описание к слайдам, и установите нужное количество отображение фотографий.

Пропишите этот код для карусели бутстрап в необходимое место страницы:
html и cssCOPY
<!-- Карусель --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Индикаторы --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Слайды (картинки) --> <!-- Первое фото --> <div class="carousel-inner"> <div class="item active"> <img src="images/1.jpg" alt=""> <div class="carousel-caption"> <h3>Заработок на партнёрках</h3> <p>Присоединяйся к нам</p> </div> </div> <!-- Второе фото --> <div class="item"> <img src="images/2.jpg" alt=""> <div class="carousel-caption"> <h3>Психология и отношения</h3> <p>Бесплатный вебинар</p> </div> </div> <!-- Третье фото --> <div class="item"> <img src="images/3.jpg" alt=""> <div class="carousel-caption"> <h3>Построй правильно своё будущее</h3> <p>А твоё будущее - это наши дети<br> Защити и отдай всё подростающему поколению</p> </div> </div> </div> <!-- Боковые стрелки --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <!-- Конец Карусель -->
Совет:
Старайтесь добавлять картинки для карусели бутстрап одинакового размера, чтобы при переходе от одного фото к другому слайдер у вас не прыгал.
Если вы используете небольшого размера картинки и хотите, чтобы они отображались в карусели в полном объёме, то пропишите для img в файле main.css следующее свойство со значением .carousel-inner > .item > img{width:100%;}

Для изменения времени перехода от одного слайда к другому (по умолчанию 5 секунд) добавьте в самую первую строку карусели этот код:
data-interval="8000" (8 сек. к примеру).

Если не хотите, чтобы при наведение мыши на карусель бутстрап происходила пауза, то пропишите в ту же строку уже такой код:
data-pause="".

А если не желаете, чтобы ваша карусель была зациклена ( постоянное воспроизведение ), то нужно прописать это:
data-wrap="false" ( по умолчанию разумеется включено ).

стрелка вниз Скачать карусель на бутстрап

Ссылка на файл: скачать архив
Дата публикации: 14.07.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!