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.

  1. No comments yet.
(will not be published)