Skip to main content
1 de 4
Dianne
  • 457
  • 4
  • 18

Bootstrap slider (carousel) en wordpress

Buenas :)

Estaba optimizando la web pero me he dado cuenta de que el plugin que usaba para el slider de la página la ralentizaba mucho (y la hacía pesar bastante mas) así que ya que estoy usando bootstrap, decidí hacer uno nuevo con código. El problema es que no se muestra absolutamente nada con el código que he hecho. Lo quiero dinamizado, de forma que puedan modificarlo, así que mediante el CPT-UI creé un post llamado "slider" al que le dejé el título y la imagen de cabecera y con el Custom Advanced Fields, cree un Field Group llamado slider de forma "post type is equal to slider". Después de esto he ido a los posts y he llamado a cada uno "img1" , "img2", "img3" e "img4", cada uno con su imagen correspondiente. Una vez hecho esto, fui a index.php (la plantilla que ando utilizando) y puse el siguiente código:

<div id="contenedorSlider">
<div class="row"><div class="col-lg-12 col-sm-12 col-md-12 hidden-xs">

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
<?php
$my_query = new WP_Query(array (
'post_type' => 'slider',
'post_per_page' => -1
));
while($my_query->have_posts ()) {
    $my_query->the_post();

       ?>
 <li data-target="#carousel-example-generic">
   <img src="<?php the_post_thumbnail_url() ?>" class="img-responsive" />
   </li> 
    <?php
}
?>
  </ol>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>


</div></div></div>

Con este código lo único que se ve es esto (imagen), que tiene un enlace y baja un poco la pantalla, pero no es lo que debe hacer. (La parte azul es de la cabecera que hay debajo de donde debe de ir el slider).

supuesto slider

En el header tengo el javascript 3.3.6 y lo mismo el css. De Jquery, tengo la versión 1.12.2 .

Muchas gracias por la ayuda :)

Dianne
  • 457
  • 4
  • 18