3

Olá a todos sou iniciante em Bootstrap, e estou desenvolvendo um carousel no boostrap, só que ao invés de mostrar apenas uma imagem gostaria que mostrasse 3, como na imagem abaixo. Como que eu poderia estar fazendo isso

inserir a descrição da imagem aqui

Código

   <div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://via.placeholder.com/350x150" alt="Primeiro Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://via.placeholder.com/350x150" alt="Segundo Slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://via.placeholder.com/350x150" alt="Terceiro Slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <img src="img/seta_e.png">
                <span class="sr-only">Anterior</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <img src="img/seta_l.png">
                <span class="sr-only">Próximo</span>
        </a>
    </div>
</div>
2
  • Sei que não tem a ver com a pergunta, mas eu iria fazer com o owlcarousel. É responsivo, altamente customizável, pode aplicar efeitos de transição, editar e colocar quantos itens deseja, definir tamanho... Commented 20/09/2018 às 19:50
  • Aqui tem um exemplo usando Bootstrap 3, bootply.com/94444
    – Jean Gatto
    Commented 20/09/2018 às 19:51

1 Resposta 1

0

Vc pode colocar 3 imagens no container e usar classes do Bootstrap como d-none d-flex para ir fazendo a responsividade. No desktop vc mostra 3, no tablet 2 e no smartphone 1 por vez?

Segue um exemplo simples que fiz seguindo esse conceito. As vezes pode ser útil para vc.

.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    display: flex !important;
}
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="w-100 m-md-1" src="https://www.placecage.com/350/150" alt="Primeiro Slide">
                <img class="d-none d-md-flex w-100 m-0 m-md-1" src="https://www.placecage.com/351/150" alt="Primeiro Slide">
                <img class="d-none d-lg-flex w-100 m-md-1" src="https://www.placecage.com/352/150" alt="Primeiro Slide">
            </div>
            <div class="carousel-item">
                <img class="w-100 m-md-1" src="https://www.placecage.com/350/150" alt="Primeiro Slide">
                <img class="d-none d-md-flex w-100 m-md-1" src="https://www.placecage.com/351/150" alt="Primeiro Slide">
                <img class="d-none d-lg-flex w-100 m-md-1" src="https://www.placecage.com/352/150" alt="Primeiro Slide">
            </div>
            <div class="carousel-item">
                <img class="w-100 m-md-1" src="https://www.placecage.com/350/150" alt="Primeiro Slide">
                <img class="d-none d-md-flex w-100 m-md-1" src="https://www.placecage.com/351/150" alt="Primeiro Slide">
                <img class="d-none d-lg-flex w-100 m-md-1" src="https://www.placecage.com/352/150" alt="Primeiro Slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <img src="img/seta_e.png">
                <span class="sr-only">Anterior</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <img src="img/seta_l.png">
                <span class="sr-only">Próximo</span>
        </a>
    </div>
</div>
    

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 .