Resize photos of carrousel made by Bootstrap and Javascript

Question

Resize photos of carrousel made by Bootstrap and Javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a carousel made by Javascript and Bootstrap. It receives images from a database based on a clicks rank, but the images are all different sizes and end up interfering with the display of the carrousel, I already tried changing sizes in inline CSS all over, but I can not solve it.

Follow my code:

<div class="row col-md-6 col-md-offset-3">
                    <div id="carousel" style="width:100%;">

                        <?php foreach($ofertas as $indice => $teste): ?>
                            <img src="<?= Yii::getAlias('@web').$teste['ofe_imagem']?>" style="!important;"> 
                        <?php endforeach ?>

                    </div>

<script>

$('#carousel').slick({
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: true,
    nextArrow:'<button  style="position"class="right carousel-control"></button>',
    prevArrow:'<button style="z-index:5"class="left carousel-control"></button>',
    slidesToShow: 1,
    infinite: true,
    adaptativeHeight: true, 

});

-

php html css twitter-bootstrap

asked by anonymous 30.10.2018 / 15:46

2 answers

0

Try to change

<div class="row col-md-6 col-md-offset-3">

by

<div class="row col-md-12">

You are using only 6 columns out of the 12 bootstrap, and this is the blank space.

30.10.2018 / 17:18

Visual Studio Code - empty CSS ruleset No insert in the table is inserting everything, even what I do not want

score 1 · Accepted Answer

Victor,

See if this solves your problem. From what I understand, this will help you.

Give your image a fixed dimension by using CSS as:

.carousel-inner> .item> img {
  largura: 640px;
  altura: 360px;
}