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).
En el header tengo el javascript 3.3.6 y lo mismo el css. De Jquery, tengo la versión 1.12.2 .
EDITO: Encontré una forma de que se mostrase el slider, mediante este código, pero ahora las flechas del slider no funcionan (es decir, no avanzan la imagen si no que se limita bajar un poco la página). Sospecho que hace algún tipo de interferencia con mi scroll pero las pruebas que he hecho, con javascript, no han funcionado (tengo antes el jquery que el javascript en el header). Ahora añado también el código de mi scroll:
Código del Slider:
<?php $diapositivesloop = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) ); ?>
<?php $i=1; ?>
<div id="carousel-example-generic" class="carousel slide carousel-fade center-block" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php while ( $diapositivesloop->have_posts() ) : $diapositivesloop->the_post(); ?>
<div class="item <?php if ($i == 1) echo 'active'; ?>">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="centroSlider">
<div class="carousel-caption">
</div>
</div>
<!-- End of the loop -->
<?php $i++; ?>
<?php endwhile; wp_reset_query();
?>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">‹</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">›</a>
</div>
</div>
Código del Scroll:
<script>
$(function() {
if(window.location.hash) {
var targetName = $(window.location.hash).selector;
var target = $('[name=' + targetName.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top-80
}, 1);
return true;
}
}
});
$('a[href*="#"]:not([href="#"])').click(function(e) {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top-80
}, {duration:1000,queue:false});
return false;
}
}
});
</script>