Un cordial saludo.
Estoy intentando insertar imágenes en la plantilla carousel, pero no sé cómo hacerlo. El código es el siguiente:
<img class="featurette-image img-responsive" src="data:image/png;base64," data-src="holder.js/500x500/auto" alt="Generic placeholder image" />
No encuentro la carpeta image/. ¿Tengo que crearla? Y si es así ¿dónde?
Tampoco entiendo que significa el código src="data:image/png;base64. ¿Puedo poner un src normal de HTML?
Gracias
Respuestas
Si estamos hablando del componente carousel de Bootstrap 3, creo que te estás liando y estás utilizando un código mucho más complicado del necesario. En realidad, el código que tienes que utilizar es el siguiente:
<div id="carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> (OPCIONAL) Título de la PRIMERA imagen </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> (OPCIONAL) Título de la SEGUNDA imagen </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> (OPCIONAL) Título de la TERCERA imagen </div> </div> </div> <a class="left carousel-control" href="#carousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
Este ejemplo es para un carrusel de tres imágenes, pero puedes adaptarlo fácilmente para más o menos imágenes.
Con respecto a tu pregunta sobre si tienes que crear la carpeta image/, efectivamente tienes que crear una carpeta (con ese nombre o con cualquier otro) y guardar ahí las imágenes. Después, indica el lugar donde has guardado la imagen mediante el atributo src:
<div class="item active"> <img src="/imagenes/imagen1.jpg" alt="Título de la imagen"> <div class="carousel-caption"> (OPCIONAL) Título de la PRIMERA imagen </div> </div>
Respecto al atributo data-src, puedes olvidarte de el porque está relacionado con un concepto más avanzado pero que no tiene nada que ver con el carrusel de Bootstrap 3. Si tienes curiosidad por saber cómo funciona el atributo data-src del ejemplo que has puesto, hace poco publicamos un tutorial sobre este tema.
@javiereguiluz
Hola chicos, Antes que nada muchas gracias por la aportación, me sirvió de mucho para poner el carousel en mi web www.latandera.com
Lo único, os queria avisar que después de:
(OPCIONAL) Título de la PRIMERA imagen
</div>
Faltaria poner otro </div> para cerrar el primer elemento.
Quedando esto:
<div class="carousel-inner"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> (OPCIONAL) Título de la PRIMERA imagen </div> </div>
Por lo demás está todo explicado perfectamente. Un saludo y espero que así os funcione.
@LaTanderaCOM
Hola,
Acabo de poner en mi web el componente Carousel, pero viene con unas sombras y unos degradados que no le pegan nada a la página. He mirado el CSS de Bootstrap, pero no consigo dar con el código que crea todo eso. Así que tengo dos cuestiones:
1) ¿Alguien me podría decir cómo se pondría el CSS para que aparezca limpio? 2) Al añadir el Carousel se me mueve la barra de navegador, es decir, el texto de cada botón se me hace mas pequeñito en relación a como están en las otras páginas que abro (sólo lo tengo instalado en Index). ¿Alguien me puede decir cómo hacer para que siga igual?
Gracias a todos.
@MissCarrusel