Carousel thumbnail bootstrap 4

Navigation
0

I'm doing an article section related to bootstrap 4 but, the problem is that nothing is achieved to see an item instead of the 4 that should have the carousel. 

<div class="container">

<div class="col-sm-12">
    <h3>ARTÍCULOS RELACIONADOS</h3>
</div>
<hr>    
<div class="col-sm-12">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">

    <div class="carousel-inner row  mx-auto" role="listbox">            

        <div class="carousel-item col-sm-3 active">
            <img class="img-fluid mx-auto d-block" src="http://www.solerpalau.mx/multimedia/imagenes/productos/b0213267bdda4803590a1651776e24ea672736e1.jpg" alt="slide 3">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="http://www.solerpalau.mx/multimedia/imagenes/productos/3359c2cd6f609c23549adf36207725bc9ebf0418.jpg" alt="slide 4">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="http://www.solerpalau.mx/multimedia/imagenes/productos/d984e5d39ffbd8453676a837e5d0480fe48e5ede.jpg" alt="Card image cap" alt="slide 5">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
        </div>
        <div class="carousel-item col-sm-3">
              <img class="img-fluid mx-auto d-block" src="http://www.solerpalau.mx/multimedia/imagenes/productos/b0213267bdda4803590a1651776e24ea672736e1.jpg" alt="Card image cap">
               <div class="card-body">
                    <h6 class="card-title">Extractores para Pared y Cristal</h6>
                </div>

        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
        </div>
        <div class="carousel-item col-sm-3">
            <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
        </div>
    </div>

    <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
        <i class="fa fa-chevron-left fa-lg text-muted"></i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
        <i class="fa fa-chevron-right fa-lg text-muted"></i>
        <span class="sr-only">Next</span>
    </a>
</div>

    
asked by Manueel Perezz 22.01.2018 в 18:58
source

1 answer

0

I leave you here some links of Carousel de Bootstrap 4

Bootstrap 4 Official Carousel

And link to StackOverflow in English, of a similar theme.

codeply offered by: @ZimSystem

Where they suggest using list-inline in the image list.

Since you have not provided the full HTML, it can sometimes be a typo failure in the css / scripts links or in the same html.

Another "possible" solution I found is use this code and adapt it to your code.

    
answered by 22.01.2018 в 19:17
Error with Negotiate scheme gridlayout not functional in java se