Reputation: 57
I have a slider:http://sakura-city.info/test
The problem is that when changing images, the height of the slider changes, despite the fact that it is hard-coded in the tag.
<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<!-- <a href="{{route('createGirlPage')}}"> -->
<img src="<?php echo asset("public/images/anketa.jpeg")?>" class="img-responsive" height="200" width="200" >
<!-- </a> -->
</div>
@foreach($vip as $girl)
<div class="item" data-slide-number="0">
<img src="<?php echo asset("public/images/upload/$girl->main_image")?>" class="img-responsive" height="200" width="200">
</div>
@endforeach
</div>
<!-- main slider carousel nav controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Upvotes: 0
Views: 9215
Reputation: 21
remove hardcoded width and height and put this into your stylesheet
.carousel-inner>.item>img, .carousel-inner>.item>a>img{
height:150px;
}
Upvotes: 0
Reputation: 1736
Your images are of different heights. Hence, you see this behavior.
Add a fixed height to the .item div
.carousel-inner>.active {
height: 150px; //this can be whatever you want
}
And remove the height="200" attribute from the images.
Upvotes: 0
Reputation: 1163
Add some css for set equal height in class .item
here, I am using height:200px
.item{ height:200px;}
And also add css for cover image complete box like here i am add css in .item img
.item img {
width: 100%;
height: 100% !important;
object-fit: cover;}
Upvotes: 2