Menu
I am using the bootstrap carousel but I want a fixed width and height so that all my images will auto fit to the defined height and width. Can someone please help me on achieving this.
<div class="row">
<div class="span8">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Deals you cannot miss.</p>
</div>
</div>
<div class="item">
<img src="~/Images/Carousel/carousel_2.jpg" alt="http://www.google.com">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Claim it now.</p>
</div>
</div>
<div class="item">
<img src="~/Images/Carousel/carousel_1.jpg" alt="http://www.google.com">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Act fast. Only for today.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
819
As a recommendation, we use an image size of 1600 pixels wide x 400 pixels tall when setting up new carousels for clubs.
Instagram carousel sizes: Portrait: 1080 x 1350 pixels. Square: 1080 x 1080 pixels. Aspect ratio: landscape (1.91:1), square (1:1), vertical (4:5) Recommended image size: Width of 1080 pixels, height between 566 and 1350 pixels (depending on whether the image is landscape or portrait)
html”) and create a simple carousel. To make it full-width we don't use any Bootstrap “container” or “row”, just the carousel which I have placed inside a “div” tag (class “top-content”) with a 100% width. The images I've used are 1920 pixels wide so they should cover pretty much every type of device.
Apply following style to carousel listbox.
<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">
...
</divBecause some images could have less than 500px of height, it's better to keep the auto-adjust, so i recommend the following:
<div class="carousel-inner" role="listbox" style="max-width:900px; max-height:600px !important;">
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
