"Carousel with face indicators"
Bootstrap 3.2.0 Snippet by BootsThemeClub

<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; }

Similar snippets: See More


Comments:

Marco Bonanno 2015-01-12 13:14:34
    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?
tintin denmark 2015-01-26 06:15:58
    I want the source code.
maxsurguy 2015-02-04 17:27:39
    You can download the whole code if you are logged in on Bootsnipp.
latishv26 2015-02-03 17:33:48
    Is there a source file for this tutorial? would be great if you can include all necessary files. thanks
maxsurguy 2015-02-04 17:28:13
    Yes, if you are logged in on this site you can click on the Cog Wheel button and click on Download Snippet, Enjoy!
Inayat Ali 2017-01-05 19:32:10
    Hi Maxsurguy i can not find Cog Wheel Button for download. can you send me source cod via E-mail
( aliinayat93@gmail.com ) Thanks :)
Chiara Coppini 2015-03-29 07:09:03
    How can I increase time slide duration?
maxsurguy 2015-03-31 02:36:00
    You would need to add data-interval attribute, like in http://getbootstrap.com/jav...
Jeff 2015-06-18 18:56:12
    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.
Sr Patinhas 2015-07-30 10:54:48
    hello, for that problem you can add this to the code
DKING93 2016-07-21 00:49:49
    Hello! I tested this set but could not make it work. Would any other solution to let this responsive snippet?
Omkar Todkar 2015-06-26 09:31:52
    Really good carousel, Good job !
Just a 'not so required' change.
The tag <center> has became deprecated in HTML5
Doug Montgomery 2015-07-30 16:06:36
    Great work Max, thanks!
freddy 2015-07-31 09:18:53
    it doesn't give me respoonsive slide :D any idea to make it responsive ?
Sunil Rana 2016-03-11 07:10:06
    how to make active image in center any idea for that..?
Mariа Ignatova 2016-05-29 09:05:42
    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
Kishan 2016-09-02 09:19:10
    Help me please... how to make three (3) faces indicators above the qoute carousel...???
Michal Vlkovič 2017-03-25 09:47:40
    Add position: relative; to the #quote-carousel
Inayat Ali 2017-01-05 19:32:33
    Hi Maxsurguy i can not find Cog Wheel Button for download. can you send me source cod via E-mail
( aliinayat93@gmail.com )
Right Click Zakaria 2017-06-11 07:01:53
    Do you have any video tutorial for this?

Commenting will be back soon.