Menu
I'm creating a website for my dad using Twitter Bootstrap, it's done except for one thing: I can't figure out how to:
- reduce the carousel width
- center the carousel
- make scroll arrows still on image
here is the website so you can check the source
I've literally gone line by line through the css and adjusted every aspect of the carousel and then checked it in my browser.
Another point of confusion is that some of these adjustments have an effect if i test it in my browser with SHIFT+CTRL+R (so notepad++ opens it in google chrome directly from my desktop w/o using a server or host) and have seen some awkward changes, yet none of these changes carry over when I place them on the server.
I've seen some other posts suggesting adjustments to .carousel and @image and have tried those without success as well.
932
If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.
It would simply be called with: $("#slider . carousel-inner"). normalizeHeight(); $(window).
You can just set the width of the carousel using CSS. Centering a block element is done with margin: 0 auto. Only change the CSS of .carousel, the rest is automatically styled correctly.
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto"> ... </div> Check out this jsfiddle to see it work.
175
Simply add a class of 'container' onto the DIV with an ID of 'myCarousel'.
So this...
<div id="myCarousel" class="carousel slide"> Becomes...
<div id="myCarousel" class="carousel slide container"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
