Carousel Customization

Navigation
3

Hello everyone, I'm a beginner in Bootstrap, and I'm developing a carousel in the boostrap, but instead of just showing one image I would like it to show 3, as in the image below. How could I be doing this?

Code

<divclass="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>
    
asked by anonymous 20.09.2018 / 21:43

1 answer

0

You can put 3 images in container and use Bootstrap classes as d-none d-flex to be responsive. On the desktop do you show 3, on tablet 2 and on smartphone 1 at a time?

Here is a simple example that I made following this concept. Sometimes it can be useful for you. 

.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><scriptsrc="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>
    
20.09.2018 / 22:02
Totalcross - Version 3.30 is supported until version of Android Wordpress redirecting home to localhost