Home Setting the height, width of image carousel
Reply: 1

Setting the height, width of image carousel

Tom
1#
Tom Published in 2017-09-12 16:37:16Z

My Image carousel code as follows

<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-0">
            <div id="imageCarousel" class="carousel slide" data-interval="4000"
                 data-ride="carousel" data-pause="hover" data-wrap="true">

                <ol class="carousel-indicators">
                    <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#imageCarousel" data-slide-to="1"></li>
                    <li data-target="#imageCarousel" data-slide-to="2"></li>
                    <li data-target="#imageCarousel" data-slide-to="3"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <img src="~/Images/Desert.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Desert</h3>
                            <p>Desert Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Jellyfish.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Jellyfish</h3>
                            <p>Jellyfish Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Lighthouse.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Lighthouse</h3>
                            <p>Lighthouse Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Penguins.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Penguins</h3>
                            <p>Penguins Image Description</p>
                        </div>
                    </div>
                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </div>
    </div>
</div>

And added the following jquery:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

Finally I used following code to set the size of image carousel

<style>
.carousel-inner > .item > img {
 width: 1200px;
 height: 360px;
}
</style>

The problem is when the page loads, it loads with the given dimensions and then suddenly get large. When I change the width to different number then the width is set as expected, but the size of the height is not set to given value. When I reduce the width then the height also changes with the width. I implemented the code for new MVC simple web application and this works well as I expected. But when I tried to implement the same for existing project, I got the problem of setting the height of the carousel.

Could you please can any one give me an idea to get this issue solved.

Omi
2#
Omi Reply to 2017-09-12 17:43:37Z

Use !important rule to height property. !important rule overrides that particular property.

.carousel-inner > .item > img {
 width: 1200px;
 height: 360px !important;
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12 col-md-offset-0">
            <div id="imageCarousel" class="carousel slide" data-interval="4000"
                 data-ride="carousel" data-pause="hover" data-wrap="true">

                <ol class="carousel-indicators">
                    <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#imageCarousel" data-slide-to="1"></li>
                    <li data-target="#imageCarousel" data-slide-to="2"></li>
                    <li data-target="#imageCarousel" data-slide-to="3"></li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <img src="~/Images/Desert.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Desert</h3>
                            <p>Desert Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Jellyfish.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Jellyfish</h3>
                            <p>Jellyfish Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Lighthouse.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Lighthouse</h3>
                            <p>Lighthouse Image Description</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="~/Images/Penguins.jpg" class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Penguins</h3>
                            <p>Penguins Image Description</p>
                        </div>
                    </div>
                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </div>
    </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.438972 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO