0

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 8000
    })
  });
#myCarousel {
    position: center;
    padding: 2em;
}
/* Thumbnail Box */
.caption h4 {
    font-size: 22px;
    color: #ffffff;
    text-align: left;
    }
        .btn.btn-mini {
            font-size: 18px;
            background-color: #00bcb3;
            color: #ffffff;
            }
/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
    }
    .carousel-control{
        background: #000000;
        display: inline-block;
        font-size: 34px;
        font-weight: 600;
        line-height: 25px;
        opacity: 100;
        padding: 4px 10px 0px;
        position: static;
        height: 40px;
        width: 40px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

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

        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide1 --> 
                <div class="item">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide2 --> 
                <div class="item">
                        <ul class="thumbnails">
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                            <li class="col-md-3">
                                <div class="thumbnail">
                                    <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                                </div>
                                <div class="caption">
                                    <h4>Praesent commodo</h4>
                                    <p>Nullam Condimentum Nibh Etiam Sem</p>
                                    <a class="btn btn-mini" href="#">&raquo; Read More</a>
                                </div>
                            </li>
                        </ul>
                  </div><!-- /Slide3 --> 
            </div>

            <div class="control-box">                            
                <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
                <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
            </div><!-- /.control-box -->   

        </div><!-- /#myCarousel -->

    </div><!-- /.col -->          
    </div><!-- /.row --> 
    </div><!-- /.container -->

Hola estoy queriendo armar un carousel como este ejemplo en boostraps 4 pero no me funciona. alguien sabe si en boostraps 4 se pueden seguir usando este tipo de carouseles??? porque copio el codigo tal cual al ejemplo y en el 3 anda, pero cuando vinculo hoja de estilo y script del 4 no funciona. Muy raro la verdad!

4
  • En Bootstrap 4 a comparación del Bootstrap 3 han cambiado algunas cosas, no es tan simple como cambiar la versión y ya debes mirar en la documentación de Bootstrap 4 como se hace el carousel, si quieres que te ayudemos debes mostrar el código que has intentado Commented el 21 nov. 2017 a las 13:40
  • Hola el codigo con el que intente hacer el carousel es el de la pagina que adjunte arriba, si había leído que habían cambiado algunas cosas.
    – MarianoF
    Commented el 21 nov. 2017 a las 13:50
  • Debes añadir el código a tu pregunta en un snippet para poderlo ejecutar Commented el 21 nov. 2017 a las 13:52
  • ahí agregue el código.
    – MarianoF
    Commented el 21 nov. 2017 a las 13:56

1 respuesta 1

2

Como te decía para que el carousel funcione debes ir a la documentación de Bootstrap 4 y leer que estructura se debe seguir, he agregado las clases que Bootstrap requiere para que el carousel funcione.

veo que hay problemas con algunos estilos, imagino que es por lo mismo te recomiendo leer la documentación para ver los cambios, saludos.

// Carousel Auto-Cycle
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 8000
    })
  });
#myCarousel {
    position: center;
    padding: 2em;
}
/* Thumbnail Box */
.caption h4 {
    font-size: 22px;
    color: #ffffff;
    text-align: left;
    }
        .btn.btn-mini {
            font-size: 18px;
            background-color: #00bcb3;
            color: #ffffff;
            }
/* Carousel Control */
.control-box {
    text-align: right;
    width: 100%;
    }
    .carousel-control{
        background: #000000;
        display: inline-block;
        font-size: 34px;
        font-weight: 600;
        line-height: 25px;
        opacity: 100;
        padding: 4px 10px 0px;
        position: static;
        height: 40px;
        width: 40px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

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

    <div class="carousel slide" id="myCarousel" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <ul class="thumbnails">
                    <li class="col-md-3">
                        <div class="thumbnail">
                            <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                        </div>
                        <div class="caption">
                            <h4>Praesent commodo</h4>
                            <p>Nullam Condimentum Nibh Etiam Sem</p>
                            <a class="btn btn-mini" href="#">&raquo; Read More</a>
                        </div>
                    </li>
                    <li class="col-md-3">
                        <div class="thumbnail">
                            <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                        </div>
                        <div class="caption">
                            <h4>Praesent commodo</h4>
                            <p>Nullam Condimentum Nibh Etiam Sem</p>
                            <a class="btn btn-mini" href="#">&raquo; Read More</a>
                        </div>
                    </li>
                    <li class="col-md-3">
                        <div class="thumbnail">
                            <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                        </div>
                        <div class="caption">
                            <h4>Praesent commodo</h4>
                            <p>Nullam Condimentum Nibh Etiam Sem</p>
                            <a class="btn btn-mini" href="#">&raquo; Read More</a>
                        </div>
                    </li>
                    <li class="col-md-3">
                        <div class="thumbnail">
                            <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                        </div>
                        <div class="caption">
                            <h4>Praesent commodo</h4>
                            <p>Nullam Condimentum Nibh Etiam Sem</p>
                            <a class="btn btn-mini" href="#">&raquo; Read More</a>
                        </div>
                    </li>
                </ul>
            </div><!-- /Slide1 --> 

            <div class="carousel-item">
                    <ul class="thumbnails">
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                    </ul>
            </div><!-- /Slide2 --> 

            <div class="carousel-item">
                    <ul class="thumbnails">
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                        <li class="col-md-3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Praesent commodo</h4>
                                <p>Nullam Condimentum Nibh Etiam Sem</p>
                                <a class="btn btn-mini" href="#">&raquo; Read More</a>
                            </div>
                        </li>
                    </ul>
            </div><!-- /Slide3 --> 
        </div>

        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div><!-- /#myCarousel -->

</div><!-- /.col -->          
</div><!-- /.row --> 
</div><!-- /.container -->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.