Crear Carousel Bootstrap en WordPress

Crear un carousel bootstrap e integrarlo en wordpress es bastante sencillo. Requiere unos mínimos pasos y una lógica simple.

Descarga los archivos utilizados en esta entrada. Busca la carpeta Bootstrap en el Directorio de Descargas

Para integrarlo con wordpress, debes tener cargados los CSS para bootstrap. En mi caso, yo tengo en la pagina de la cabecera (header.php) la siguiente linea indicando la ubicacion de mi hoja de estilo, 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

la linea de arriba indica cual es mi hoja de estilos. Y luego dentro de la hoja de estilos, tengo las siguientes lineas que importan los estilos de bootstrap

@import url("bootstrap/css/bootstrap.css");
@import url("bootstrap/css/bootstrap-responsive.css");
@import url("bootstrap/css/queryLoader.css");

y por regla de optimizacion, al final de la pagina de header.php, a cargar los siguientes scripts.

<script src="bootstrap/js/jquery-1.10.1.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/js/bootstrap-carousel.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/queryLoader.js"></script>
<script src="bootstrap/js/jquery.sticky.js"></script>

Lo siguiente se trata de pegar el código de abajo en donde quieras el carousel. En mi caso, yo queria reemplazar el logo por el carousel, por lo tanto lo puse en el header.

El carousel por defecto viene con los indicadores de pestaña. Los puedes des-habilitar simplemente borrandolos.

<!-- Bootstrap Carousel Comienzo -->
<div id="contenedor">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
</ol>
<div class="carousel-inner">
<div class="active item"><img src="#" alt="banner1" /></div>
<div class="item"><img src="http://#" alt="banner2" /></div>
<div class="item"><img src="http://#" alt="banner3" /></div>
<div class="item"><img src="http://#" alt="banner4" /></div>
<div class="item"><img src="http://#" alt="banner5" /></div>
<div class="item"><img src="http://#" alt="banner6" /></div>
<div class="item"><img src="http://#" alt="banner7" /></div>
<div class="item"><img src="http://#" alt="banner8" /></div>
<div class="item"><img src="http://#" alt="banner9" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
<script>
$(document).ready(function(){
$('#myCarousel').carousel()
});
</script>
<!-- Bootstrap Carousel Fin -->

Al final es donde se carga el script que manejara la velocidad a que se cambian las imágenes. Por defecto, el carousel cambia las imagenes cada 5 segundos. Yo lo tengo modificado a 10 segundos de la siguiente forma.

$(document).ready(function() {
 $('#myCarousel').carousel({ interval: 10000})
});
* indicates required
Idioma / Language

Intuit Mailchimp

Kunal Sajnani
Kunal Sajnanihttps://canariasagusto.com/sobre
¡Hola! Soy Kunal, el autor de este blog. Soy un nerd informático, fotógrafo, diseñador web y cocinero de paso. No dejes que llegue aquel día en el que te arrepientas de no haber explorado o probado cosas nuevas. Con ese lema, voy blogueando a medida que descubro. ¡Sígueme en la aventura!

Latest articles

* indicates required
Idioma / Language

Intuit Mailchimp

Artículo anterior
Artículo siguiente

Related articles

DEJA UNA RESPUESTA

Por favor introduzca su comentario.
Introduzca su nombre aqui

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.