» Как сделать карусель на бутстрап

Как сделать карусель на бутстрап

0 473

галерея на бутстрап

После того, как разобрались с меню на бутстрап, перейдём к фотогалерее - карусель бутстрап.

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

 

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

карусель бутстрап

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

Пропишите этот код в необходимое место страницы:

Код для карусели бутстрап
<!-- Карусель  -->
<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>Заработок на партнёрских программах 2017</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" (по умролчанию разумеется включено).

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

Ссылка на файл: karusel-bootstrap.zip 9

Похожие новости