Carousels

Carousels

Basic carousel whith caption

Carousel perfect for passing images. Optionally you can add a title and a description.

It is fully responsive and adaptable to all screen sizes and devices.

It is made with the original Carousel of Bootstrap, so you will not have to learn anything new.


<div id="carousel-example-captions" class="carousel carousel-images slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="First slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>First slide label</h3>
    <p>...</p>
</div>
</div>
<div class="item">
<img src="..." alt="Second slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>Second slide label</h3>
    <p>...</p>
</div>
</div>
<div class="item">
<img src="..." alt="Third slide image">
<div class="carousel-caption animated fadeInUpBig">
    <h3>Third slide label</h3>
    <p>...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
                            


Bxslider

To use bxSlider see the official documentation.

Multiple Items


With Motion


Multiple Items With Captions


  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

  • ...

    Thumbnail label

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, repellat, vitae porro ex expedita cumque nulla velit consequuntur recusandae animi.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *