1

Tenho um carrousel feito por Javascript e Bootstrap. Ele recebe imagens de um banco baseado em um rank de cliques, mas as imagens são todas de tamanhos diferentes e acabam interferindo no display do carrousel, eu ja tentei mudar tamanhos em CSS inline por todo lado, mas não consigo resolver.

Segue meu código:

<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, 

});

-

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

4
  • Cara posta uns prints ai de como as imagens aparecem no carrossel, só como o código e pelo relato não da pra entender bem... E qual versão do Bootstrap está usando?
    – hugocsl
    30/10/2018 às 14:55
  • Upei as imagens, e estou usando a versão mais recente do Bootstrap 30/10/2018 às 15:47
  • Vc quer que as imagens ocupem todo o espaço branco até as bordas azuis?
    – hugocsl
    30/10/2018 às 16:06
  • Exato, quero que ela cubra toda a div 30/10/2018 às 16:16

2 Respostas 2

1

Victor,

Vê se isso resolve seu problema. Pelo que eu entendi, isso vai te ajudar.

Dê uma dimensão fixa à sua imagem usando CSS como:

.carousel-inner> .item> img {
  largura: 640px;
  altura: 360px;
}
4
  • Apenas fechou a imagem, mas vou tentar continuar trabalhando nesse conceito 30/10/2018 às 15:51
  • 1
    Fechou a imagem? como assim?
    – Renan
    30/10/2018 às 15:58
  • Consegui fazer, usando sua resposta e a do Pbras, muito obrigado! 30/10/2018 às 16:44
  • Parabéns, se precisar de algo avisa.
    – Renan
    30/10/2018 às 17:36
0

Exprimenta trocar

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

por

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

Estás a usar só 6 colunas das 12 de bootstrap, e opor isso fica o espaço em branco.

1
  • Consegui fazer, usando sua resposta e a do Renan Osorio, muito obrigado! 30/10/2018 às 16:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .