1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Anchura de slideshow en bootstrap

Tema en 'Frameworks' comenzado por diego72, 21 de Mayo de 2015.

  1. diego72

    diego72 Nuevo Miembro

    Se incorporó:
    15 de Mayo de 2015
    Mensajes:
    21
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Hola a todos;
    Estoy realizando un slideshow con bootstrap, y sale correcto , lo que ocurre es que me gustariá que ocupase todo el ancho de la pantalla, ¿ sabeis como conseguie esto?.
    Gracias de antemano.
     
  2. albertocar

    albertocar Nuevo Miembro

    Se incorporó:
    7 de Mayo de 2015
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola
    Si has puesto que el slideshow ocupe las 12 columnas, creo que lo que había que hacer era elegir imágenes grandes, de 1200px en adelante. Creo que lo vi en un videotutorial de Falconmasters en youtube, en el curso que tiene de bootstrap. Puedes mirarlo a ver si te sirve.
     
  3. diego72

    diego72 Nuevo Miembro

    Se incorporó:
    15 de Mayo de 2015
    Mensajes:
    21
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    si es el tutorial que he mirado , lo intente asi cambiando las medidas pero no me sirve,
    GRacias
     
  4. Kyon

    Kyon Miembro

    Se incorporó:
    14 de Abril de 2015
    Mensajes:
    87
    Me gusta recibidos:
    41
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Bogota, Colombia
    Si es posible quisiera ver el código que estas haciendo para el slide para poderlo modificar.
     
  5. diego72

    diego72 Nuevo Miembro

    Se incorporó:
    15 de Mayo de 2015
    Mensajes:
    21
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Si claro : pego aqui el codigo y gracias:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <title>Blog_creaciones</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    </head>
    <body>

    <section class="jumbotron">
    <div class="container">
    <h1 class="Titulo-blog">Cre@ciones_Diweb Blog </h1>
    <p> Blog Para aprender (Para torpes como yo)</p>


    </div>



    </section>
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navegacion-fm">
    <span class="sr-only">Desplegar / Ocultar menu </span>
    <span class="icon-bar"> </span>
    <span class="icon-bar"> </span>
    <span class="icon-bar"> </span>
    </button>
    <a href="#" class="navbar-brand">Cre@ciones_Diweb</a>

    </div>
    <div class="collapse navbar-collapse" id="navegacion-fm">
    <ul class="nav navbar-nav">
    <li><a href="#"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
    <li><a href="#"><span class=" glyphicon glyphicon-user"></span> Nosotros</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegar <b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Contacta</a></li>

    </ul>

    </li>



    </ul>

    </div>

    </div>


    </nav>
    <div class="container">
    <div class="col-md-12">
    <div id="carousel-1" class="carousel slide show" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1" ></li>
    <li data-target="#carousel-1" data-slide-to="2" ></li>
    </ol>

    <div class="carousel-inner" role="listbox">

    <div class="item active">
    <img src="images/fofito.jpg" class="img-responsive"alt="">
    <div class="carousel-caption">
    <h3> Este es nuestra primera foto </h3>

    </div>

    </div>


    <div class="item ">
    <img src="images/photo1.jpg" class="img-responsive"alt="">
    <div class="carousel-caption">
    <h3> Este es nuestra primera foto </h3>

    </div>

    </div>

    <div class="item ">
    <img src="images/photo1.jpg" class="img-responsive"alt="">
    <div class="carousel-caption">
    <h3> Este es nuestra primera foto </h3>

    </div>

    </div>


    </div>
    </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script src="js/jquery.js"> </script>
    <script src="js/bootstrap.min.js"></script>
    </body>

    </html>
     
  6. Kyon

    Kyon Miembro

    Se incorporó:
    14 de Abril de 2015
    Mensajes:
    87
    Me gusta recibidos:
    41
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Bogota, Colombia
    Uhmm ok.

    Primero que todo varias observaciones:
    • Que editor de texto usas? Es bueno siempre tener un buen orden de nuestros proyectos, y un buen editor de texto te facilita mucho las cosas (siempre recomiendo Sublime Text).
    • Los editores de texto usualmente te ayudan indentando el texto. Trata siempre de que este indentado, y así veras si hace falta algo dentro de tu código. Es normal que siempre se nos olvide un tag de cierre.
    • Dentro de tu código de hecho, faltaba cerrar un div, aunque esa no era la razón por la que no funcionaba.
    • La clase "container" de Bootstrap te acomoda tu contenido con un margen, por lo que dejar el slider dentro del container (si lo quieres full-width) no es funcional.
    • La rejilla de las 12-columnas es útil, pero igual no te tomará como full-width.
    • Por que tienes dos librerias de jQuery?
    Ahora bien, sabiendo eso la solución es cambiar el tamaño de la imagen con un ancho determinado. Que tampoco es útil porque no todos los dispositivos y monitores tienen el mismo ancho, así que la fácil es, editar los estilos.

    No sé que es lo que tengas en tu archivo "estilos.css", así que solo te daré un fragmento que tendrás que pegar para que tu slider funcione bien.

    Acá te dejo mi solución funcionando y algo organizado:

    HTML (index.html):
    Código (Text):
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
        <title>Blog_creaciones</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="estilos.css">
    </head>
    <body>

        <section class="jumbotron">
            <div class="container">
                <h1 class="Titulo-blog">Cre@ciones_Diweb Blog </h1>
                <p> Blog Para aprender (Para torpes como yo)</p>
            </div>
        </section>
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navegacion-fm">
                        <span class="sr-only">Desplegar / Ocultar menu </span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                        <span class="icon-bar"> </span>
                    </button>
                    <a href="#" class="navbar-brand">Cre@ciones_Diweb</a>
                </div>
                <div class="collapse navbar-collapse" id="navegacion-fm">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Nosotros</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegar <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Fotos</a></li>
                                <li><a href="#">Videos</a></li>
                                <li><a href="#">Contacta</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="carousel-1" class="carousel slide show" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-1" data-slide-to="1" ></li>
                <li data-target="#carousel-1" data-slide-to="2" ></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="http:/lorempixel.com/1024/500/sports/1" class="img-responsive"alt="">
                    <div class="carousel-caption">
                        <h3> Este es nuestra primera foto </h3>
                    </div>
                </div>
                <div class="item ">
                    <img src="http:/lorempixel.com/1024/500/sports/2" class="img-responsive"alt="">
                    <div class="carousel-caption">
                        <h3> Este es nuestra primera foto </h3>
                    </div>
                </div>
                <div class="item ">
                    <img src="http:/lorempixel.com/1024/500/sports/3" class="img-responsive"alt="">
                    <div class="carousel-caption">
                        <h3> Este es nuestra primera foto </h3>
                    </div>
                </div>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>

    </html>
    CSS (estilos.css):
    Código (Text):
    .carousel .item {
        width: 100%;
        max-height: 400px;
    }
    .carousel .item img {
        width: 100%;
    }
    Notas:
    • Para que funcione dentro de tu proyecto no solo tendrás que hacer un copiar-pegar, debes también cambiar las rutas de los estilos/scripts que yo cambié para probarlo.
    • Obviamente también tienes que cambiar la ruta de las imágenes, para que puedas visualizar las que tu tienes.
    Bueno eso es todo, espero que te sirva.

    Un SaludoQ
     
    A Nata Cortes le gusta esto.
  7. diego72

    diego72 Nuevo Miembro

    Se incorporó:
    15 de Mayo de 2015
    Mensajes:
    21
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Muchas Gracias por la ayuda, tienes toda la razon tengo que aprender a utiizar sublime text mejor y ser más ordenado con los códigos.
    Funciona perefectamente.
     
  8. Kyon

    Kyon Miembro

    Se incorporó:
    14 de Abril de 2015
    Mensajes:
    87
    Me gusta recibidos:
    41
    Puntos de trofeos:
    18
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Bogota, Colombia
    Me alegra que te halla funcionado bien!

    No te preocupes, acá estamos todos para aprender. Con el tiempo y la practica todo se vuelve mas fácil, así que a darle!

    Un Saludo!
     
    A Nata Cortes le gusta esto.
  9. axeljoel

    axeljoel Nuevo Miembro

    Se incorporó:
    9 de Abril de 2016
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Mujer
    Muchas gracias por este código.

    Es el único que me ha funcionado después de estar todo el día como loca, buscando.

    Gracias
     
  10. kbass

    kbass Nuevo Miembro

    Se incorporó:
    27 de Agosto de 2016
    Mensajes:
    7
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Una pregunta ese slide es Reponsive y fullscreen ¿?
     

Comparte esta página