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 () - 8 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 () - 8 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 () - 8 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 () - 9 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 () - 9 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 () - 9 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 () - 10 years ago - Reply 0
maxsurguy () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 8 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 () - 8 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 () - 8 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 () - 8 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 () - 8 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 () - 8 years ago - Reply 0
