Bootstrap 3 carousels shrink in height when cycling

Question

Bootstrap 3 carousels shrink in height when cycling

As I said, while the carousel cyclically increases the height of the elements inside, it becomes smaller until it reaches the next frame. I could shed light on this issue, I would really appreciate it, this is something that just needs to be fixed, and it makes me spoil all other kinds of edible things.

html:

               <div id="shop-crsl-1" class="carousel slide shop-crsl hidden-xs" data-ride="carousel">

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active row">
                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Casual Suit</h5>
                                                <h5 class="main-text-color">$199.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Night Suit</h5>
                                                <h5 class="main-text-color">$249.99</h5>
                                            </div>

                                            <div class="rating">

                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Elegant Suit</h5>
                                                <h5 class="main-text-color">$149.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="item row">
                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Casual Suit</h5>
                                                <h5 class="main-text-color">$199.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Night Suit</h5>
                                                <h5 class="main-text-color">$249.99</h5>
                                            </div>

                                            <div class="rating">

                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="shop-col-item">
                                    <div class="photo">
                                        <img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
                                    </div>
                                    <div class="info">
                                        <div>
                                            <div class="price">
                                                <h5>Super-Elegant Suit</h5>
                                                <h5 class="main-text-color">$149.99</h5>
                                            </div>

                                            <div class="rating">
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="main-text-color fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>

                                        <div class="btns clear-left">
                                            <p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
                                            <p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Controls -->
                    <div class="controls">
                        <a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
                        <a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
                    </div>
                </div>

favorite css

.shop-crsl {
    position: relative;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    padding: 0 15px;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.shop-crsl .controls a {
    position: absolute;
    top: 50%;
    width: 100%;
    line-height: 53px;
    width: 50px;
    border-radius: 2px;
    text-align: center;
    margin-top: -30px;
    font-size: 11px;
    height: 50px;
    transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    -ms-transition: all 0.35s ease;
}

.shop-crsl .controls a:hover {
    text-decoration: none;
}

.shop-crsl .controls .left {
    left: 15px;
    position: absolute;
    padding-right: 3px;
}

.shop-crsl .controls .right {
    right: 15px;
    position: absolute;
    padding-left: 3px;
}

.shop-col-item:hover {
    cursor: pointer;
}

.shop-promo {
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.shop-promo h3 {
    margin-top: 20px;
}

.shop-promo .title {
    font-size: 42px;
    line-height: 48px;
    padding: 12px 0;
    padding-bottom: 22px;
}

.shop-promo .button {
    margin: 24px 0;
}

.shop-promo p {
    margin: 10px 0;
}

.shop-col-item {
}

.shop-col-item .photo {
    border-radius: 5px;
}

.shop-col-item .photo img {
    margin: 0 auto;
    width: 100%;
}

.shop-col-item .info {
    padding: 10px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}

.shop-col-item .price {
    width: 50%;
    float: left;
    margin-top: 5px;
}

.shop-col-item .price h5 {
    line-height: 20px;
    margin: 0;
}

.shop-col-item .rating {
    width: 50%;
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.shop-col-item .btn-add {
    width: 50%;
    float: left;
}

.shop-col-item .btn-details {
    width: 50%;
    float: left;
    padding-left: 10px;
}

.shop-col-item .btn-details .fa-list {
    position: relative;
    top: 1px;
}

.shop-col-item .btns p {
    font-size: 11px;
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
}

.shop-col-item .btns p i {
    font-size: 14px;
    margin-right: 5px;
}

+3

jquery html css twitter bootstrap twitter-bootstrap-3

Szekely jonathan Feb 13 '14 at 0:01

source share

3 answers

ariel · Answer 1 · 2014-02-13T04:05:24+0000

You need this in your css: .carousel-inner>.active { width: 100% }

The reason is that when the carousel moves forward, the sliding element has width: 100%, but for some reason the active element does not, and this makes this difference. This may be a download error, but I'm not sure.

, transition :)

: http://jsfiddle.net/bortao/YLdm8/

, . css :

.carousel-inner>.active, .carousel-inner>.next, .carousel-inner>.prev { 
   width: 102.5%!important;
}

Abraham Taylor · Answer 2 · 2016-03-16T17:57:23+0000

. , "" "" , Twitter Bootstrap. , CSS, .left {stuff here}, . CSS , , "" "", "float-left" "float-right", .

Sameer Awate · Answer 3 · 2017-03-10T16:13:29+0000

margin-top: 0px; CSS .carousel .item, . , .

Bootstrap 3 carousels shrink in height when cycling

More articles: