"Responsive Quote Carousel"
Bootstrap 3.3.0 Snippet by bmoeller1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 tags to include FontAwesome --> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class='col-md-offset-2 col-md-8 text-center'> <h2>Responsive Quote Carousel BS3</h2> </div> </div> <div class='row'> <div class='col-md-offset-2 col-md-8'> <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"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="http://www.reactiongifs.com/r/overbite.gif" style="width: 100px;height:100px;"> <!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">--> </div> <div class="col-sm-9"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p> <small>Someone famous</small> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</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>
/* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; } /* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; font-size: 2.3em; text-shadow: none; margin-top: 30px; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 250px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } } /* Small devices (tablets, up to 768px) */ @media (max-width: 768px) { /* Make the indicators larger for easier clicking with fingers/thumb on mobile */ #quote-carousel .carousel-indicators { bottom: -20px !important; } #quote-carousel .carousel-indicators li { display: inline-block; margin: 0px 5px; width: 15px; height: 15px; } #quote-carousel .carousel-indicators li.active { margin: 0px 5px; width: 20px; height: 20px; } }
// When the DOM is ready, run this function $(document).ready(function() { //Set the carousel options $('#quote-carousel').carousel({ pause: true, interval: 4000, }); });

Related: See More


Questions / Comments:

Hi, I am trying to use this on rails, but I cannot seem to make the button work. The display is fine, but the slider is not changing.

Elliot () - 2 years ago - Reply 1


How can I make it "fullscreen"?

Gábor Vecsei () - 1 year ago - Reply 0


how to download ??

Adra () - 2 years ago - Reply 0


When i click on prev and next button so that time #quote-carousel id add in browser address bar that is updated my url how to remove this "#quote-carousel".

Mohd Javed () - 2 years ago - Reply 0


I can't move the arrows outside of the carousel, like you did. :(

Dan () - 2 years ago - Reply 0


How do you slow it down?

Brad () - 2 years ago - Reply 0


Go into the JS tab and increase the interval. That's in milliseconds, so....4000 = 4secs. Change it to 9000 for 9secs and so forth

$('#quote-carousel').carousel({
pause: true,
interval: 8000,
});

Brian Moeller () - 2 years ago - Reply 0


in IE the carousel has a gradient background mostly under the prev/next arrows.. in Firefox the background is white. Can I make it white in all browsers? Can't seem to find the CSS code responsible for it..

Daniel () - 3 years ago - Reply 0


Hi, I wan´t to stop the carrousel, and let the users manipulate de slides trough the arrows. How is the way to stop it?

Esteban Artavia () - 3 years ago - Reply 0


Please check out http://getbootstrap.com/jav... for Carousel Docs. I think you have to replace "pause : true" with "pause : 'hover'" and that should do it!

maxsurguy () - 3 years ago - Reply 0


thanks maxsurguy

Esteban Artavia () - 3 years ago - Reply 0


Thank you so much!!! <3

Thalita Oliveira () - 3 years ago - Reply 0


Really amazing..thank you dude

sathish () - 3 years ago - Reply 0


Hey, thanks alot. Does anyone know how to make the circled indicators bigger? I cant seem to change their size

Nikolaj () - 4 years ago - Reply 0


Yes, you can do that by changing the width and height on ".carousel-indicators li" elements, for example:

maxsurguy () - 4 years ago - Reply 0


awesome dude

Ankappa () - 4 years ago - Reply 0


ya true

darshan () - 4 years ago - Reply 0


Atrax () - 4 years ago - Reply 0


Hi

It was really great!

My difficult is that when I place the files in a simple slider has no effect loaded?

Which jquery code should I put in?

rozesia7 () - 4 years ago - Reply 0


If you're a registered user, make sure you're logged in, then go to this snippet, click on the cog wheel icon (next to "Fork this") and click on download snippet. That will download it all.

maxsurguy () - 4 years ago - Reply 0


ok tnx bro

rozesia7 () - 4 years ago - Reply 0


Where I can download this? Its awesome

Alejandrom3 () - 4 years ago - Reply 0


If you're a registered and logged in as Bootsnipp user just click on the cog wheel and click on download snippet :)

maxsurguy () - 4 years ago - Reply 0


This margin declaration is wrong:

#quote-carousel

{

padding: 0 10px 30px 10px;

margin-top: 30px 0px 0px;

}

But if you change it to this, it works fine:

#quote-carousel

{

padding: 0 10px 30px 10px;

margin: 30px 0px 0px;

}

sarehawes () - 4 years ago - Reply 0


Thanks for the catch. Corrected it.

Brian Moeller () - 4 years ago - Reply 0


I have (mostly) merged this Quote Carousel with Jason Mayes' JavaScript Twitter API ( http://jasonmayes.com/proje... )

Have a look here:
https://gist.github.com/ano...

jsfiddle: http://jsfiddle.net/uoffLk7...

Enjoy :)

mbp2011 () - 4 years ago - Reply 0


you saved my life! :)

Timo Radzik () - 4 years ago - Reply 0


Haven't been here in awhile. Didn't realize they added comments. If it's not working or you see an issue, just reply. I'll see what I can do to clean it up

Brian Moeller () - 4 years ago - Reply 0


Hey Brian, thank you for this, it looks awesome, but I must be missing something :(
In the script at

$('#quote-carousel').carousel({

I get this error

'Uncaught TypeError: $(...).carousel is not a function

But I can't figure where it should be defined anyway, there's no other JS in your snippet. What am I missing?

Thanks!

Leonardo Zangrando () - 2 years ago - Reply 0


Hi Leonardo, Carousel is a function of the bootstrap javascript. These <bootsnipp> snippets (not just mine) do not show the actual bootstrap integration that is needed to run these snippets. It's kind of assumed. If you already added the bootstrap CSS, then you just need the JS as well to run the sliding animation. To same you some time, here are the latest files (version 3.3.7) that you can place in your <head> tags. Once they are added, the slider should be working for you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn..." integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn..." integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Brian Moeller () - 2 years ago - Reply 0


Hey Brian, thanks a lot!
I've been using Bootstrap for a year or so now, and now I'm experimenting with Hugo. That's why i got confused, I was expecting Hugo to include Bootstrap! Whereas I have to do it, taking care of class conflicts...

Leonardo Zangrando () - 2 years ago - Reply 0


2 years later....

I'm facing some issues. The carousel is working fine in this web page, but, when I download it, the arrows disappears. Do you know why and how to fix it?

Thank you and sorry for bothering :/

Lucas Cosas () - 2 years ago - Reply 0


No problem Lucas. Those arrows are from FontAwesome icon collection. If you look at the HTML in this example, you will see I have a link tag at the top pointing to version 4.0.3 (<link href="//netdna.bootstrapcdn.com/fon..." rel="stylesheet">). They are currently up to version 4.6, but they still have the "chevrons" which are what these arrows are. This really just sounds like a case of not importing the font awesome collection :)

If you are not familiar with FontAwesome, you can check their site out here (http://fontawesome.io/).

Brian Moeller () - 2 years ago - Reply 0


Thank you for your reply! :)

I don't know what happened, but I did copy and paste all the code to another file and tried again. For some magical reason it worked. The file I downloaded here isn't working but the new one is, perfectly fine!

Thank you, again!

Lucas Cosas () - 2 years ago - Reply 0


@None carousel.css is conflicting.

chris () - 5 years ago - Reply 0


Can't get this to work.

None () - 5 years ago - Reply 0


Awesome !

leBjoern () - 5 years ago - Reply 0


whoah cool, nice work, thanks

Yoza Wiratama () - 5 years ago - Reply 0