17

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>
Gaurang Tandon
  • 6,504
  • 11
  • 47
  • 84
nishantvodoo
  • 835
  • 3
  • 17
  • 32
  • why you want to fix this carousel? – SaurabhLP Jun 11 '13 at 05:02
  • yes I want the carousel to be of a fixed height and width and no matter what image I assign to it, it should try to auto fit the image based on the size defined. I want it consistent and since I will have to keep changing the images so it will be easier. Also it will let me change the height and width of carousel without changing the picture size – nishantvodoo Jun 11 '13 at 05:04
  • easy way out, what i think drop the idea of embedding TB carousel to your site, find some other slider plugin... for TB Carousel you have to customize its css and js, which is time taking work... – SaurabhLP Jun 11 '13 at 05:10

4 Answers4

26

Apply following style to carousel listbox.

<div class="carousel-inner" role="listbox" style=" width:100%; height: 500px !important;">

...

</div
Albuquerque Web Design
  • 413
  • 7
  • 16
sunil sah
  • 484
  • 5
  • 5
4

Because 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;">
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Gabriel Souto
  • 600
  • 7
  • 19
1

In your main styles.css file change height/auto to whatever settings you desire. For example, 500px: 

#myCarousel {
  height: auto;
  width: auto;
  overflow: hidden;
}
Nathaniel Ford
  • 20,545
  • 20
  • 91
  • 102
Johnathan
  • 389
  • 2
  • 4
  • 18
0

To have a consistent flow of the images on different devices, you'd have to specify the width and height value for each carousel image item, for instance here in my example the image would take the full width but with a height of "400px" (you can specify your personal value instead)

<div class="item">
    <img src="image.jpg" style="width:100%; height: 400px;">
</div>
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
y0ung0d
  • 43
  • 1
  • 9