"Carousel with face indicators"
Bootstrap 3.2.0 Snippet by BootsThemeClub

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> </head> <div class="container"> <div class="row"> <div class="col-md-12" data-wow-delay="0.2s"> <div class="carousel slide" data-ride="carousel" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt=""> </li> <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt=""> </li> <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt=""> </li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner text-center"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p> <small>Someone famous</small> </div> </div> </blockquote> </div> </div> <!-- Carousel Buttons Next/Prev --> <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div> </div> </div> </div> <hr class="divider"/> <center> <strong>Powered by <a href="http://bootstheme.club" target="_blank">BootsTheme.Club</a></strong> </center>
/* Carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; /* Control buttons */ /* Previous button */ /* Next button */ /* Changes the position of the indicators */ /* Changes the color of the indicators */ } #quote-carousel .carousel-control { background: none; color: #CACACA; font-size: 2.3em; text-shadow: none; margin-top: 30px; } #quote-carousel .carousel-control.left { left: -60px; } #quote-carousel .carousel-control.right { right: -60px; } #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } #quote-carousel .carousel-indicators li { width: 50px; height: 50px; margin: 5px; cursor: pointer; border: 4px solid #CCC; border-radius: 50px; opacity: 0.4; overflow: hidden; transition: all 0.4s; } #quote-carousel .carousel-indicators .active { background: #333333; width: 128px; height: 128px; border-radius: 100px; border-color: #f33; opacity: 1; overflow: hidden; } .carousel-inner { min-height: 300px; } .item blockquote { border-left: none; margin: 0; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; }

Related: See More


Questions / Comments:

Do you have any video tutorial for this?

Right Click Zakaria (0) - 10 months ago - Reply 0


Hi Maxsurguy i can not find Cog Wheel Button for download. can you send me source cod via E-mail
( aliinayat93@gmail.com )

Inayat Ali (0) - 1 year ago - Reply 0


Help me please... how to make three (3) faces indicators above the qoute carousel...???

Kishan (0) - 1 year ago - Reply 0


Add position: relative; to the #quote-carousel

Michal Vlkovič (0) - 1 year ago - Reply 0


It works great... Is there any way to custom the face indicators? I'm trying to show just 3 face indicators and the active one to be in the middle always... If someone knows how can I make it

Mariа Ignatova (0) - 1 year ago - Reply 0


how to make active image in center any idea for that..?

Sunil Rana (0) - 2 years ago - Reply 0


it doesn't give me respoonsive slide :D any idea to make it responsive ?

freddy (0) - 2 years ago - Reply 0


Great work Max, thanks!

Doug Montgomery (0) - 2 years ago - Reply 0


Really good carousel, Good job !
Just a 'not so required' change.
The tag <center> has became deprecated in HTML5

so, at bottom line class text-center can be used instead.

Omkar Todkar (0) - 2 years ago - Reply 0


Hi, I really like this carousel alot but there is an issue for me. When viewing the carousel through a mobile device with a lower screen resolution, the carousel indicators overlap over the blockquote (carousel-inner). How can I divide the content and the indicator so they don't overlap anymore? I have 8 slides in this carousel. Thank you.

Jeff (0) - 2 years ago - Reply 0


hello, for that problem you can add this to the code


.carousel-inner {
min-height: 160px;
width: 90%;
margin-left: 5%;
}

Sr Patinhas (0) - 2 years ago - Reply 0


Hello! I tested this set but could not make it work. Would any other solution to let this responsive snippet?

DKING93 (0) - 1 year ago - Reply 0


How can I increase time slide duration?

Chiara Coppini (0) - 3 years ago - Reply 0


You would need to add data-interval attribute, like in http://getbootstrap.com/jav...

maxsurguy (0) - 3 years ago - Reply 0


Is there a source file for this tutorial? would be great if you can include all necessary files. thanks

latishv26 (0) - 3 years ago - Reply 0


Yes, if you are logged in on this site you can click on the Cog Wheel button and click on Download Snippet, Enjoy!

maxsurguy (0) - 3 years ago - Reply 0


Hi Maxsurguy i can not find Cog Wheel Button for download. can you send me source cod via E-mail
( aliinayat93@gmail.com ) Thanks :)

Inayat Ali (0) - 1 year ago - Reply 0


I want the source code.

tintin denmark (0) - 3 years ago - Reply 0


You can download the whole code if you are logged in on Bootsnipp.

maxsurguy (0) - 3 years ago - Reply 0


I'm using this snippet as a list of the results of the automatic database. I noticed that no "slide-to-date =" 0 "the snippet does not work, in fact, the slider does not go ahead as normal. How can I fix this?

Unfortunately I can not put a ladder numbers, 0,1,2,3,4 etc., for this I would solve it in another way, thanks

Marco Bonanno (0) - 3 years ago - Reply 0