CODEWITHSUNDEEP
javascripthtmlcarousel
test_name
test_name

Reputation: 57

The same size of images in carousel slide

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

Answers (3)

Ahsan Haroon
Ahsan Haroon

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

Ishwar Patil
Ishwar Patil

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

Cryptex Technologies
Cryptex Technologies

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

Related Questions