0

I built a wordpress site with a bootstrap carousel at the top. As you might have seen, that carousel's code goes:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true">
    </span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" 
role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
  </a>
</div>

What i did (since i need it to be dynamic) was:

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="7"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="8"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="9"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$postsSlider = new WP_Query(array(
    'cat' => 7,
    'posts_per_page' => 10,
));
$first = true;
if ($postsSlider->have_posts()) :
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

    if ($first) {
 ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item active" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>

    <?php 
  $first = false;
  } 
  else { ?>
    <a class="foto_link" href="<?php the_permalink(); ?>">
      <div class="carousel-item" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

        <div class="carousel-caption d-none d-md-block">
          <a href="<?php the_permalink(); ?>">
            <h1 class="titulo-slider">
              <?php the_title(); ?>
            </h1>
            <br>
            <h4 class="subtitulo-slider">
              <?php echo the_excerpt(); ?>
            </h4>
            <br>
            <h3>Por
              <?php the_author(); ?>
            </h3>
          </a>
        </div>
      </div>
    </a>
    <?php }
  ?>

    <?php

    endwhile; else :
            echo '<p class="no-content">No encontramos ningún contenido</p>';
    endif;
    wp_reset_postdata();
  ?>

 </div>

 <!-- Controls -->
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true">/span>
   <span class="sr-only">Anterior</span>
   </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Próximo</span>
   </a>
  </div>

For description sake i tell you that the $first variable and the if statement I use it to give the first iteration the class 'active'. For the rest the code is identical.
In general everything works, but my problem here is that in my code the tag:

<a class="foto_link" href="<?php the_permalink(); ?>">

is wrapping the tag:

<div class="carousel-item active" style="background-image: url('<?php the_post_thumbnail_url('slider');?>'); background-size: cover">

But the output unfortunately is:

enter image description here

That closing </a> at line 4 (in the little picture) should be at the end of div.carousel-item wrapping it and I don't know why it is not. My code in imgs: enter image description here enter image description here enter image description here enter image description here

closed as off-topic by Michael, cjbj, Jacob Peattie, Christine Cooper, Nathan Johnson Feb 5 '18 at 17:15

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • You have a nested anchor tag. I have never seen that done before. You are wrote this with your code – Jamie Jan 11 '18 at 1:10
  • Yes, i wrote this code. – Marcos Di Paolo Jan 11 '18 at 1:10
1

You have a nested anchor tag. I have never seen that done before. You are wrote this with your code

 <a href="#"><a href="#"></a></div></div></a>   

I would think that is your problem. Why do you need this first anchor tag?

 ?php
while ($postsSlider->have_posts()) : $postsSlider->the_post(); 

if ($first) {
?>
  <a class="foto_link" href="<?php the_permalink(); ?>">//should this be here

Take out that anchor tag and see what happens

  • Actually that tag is ok, the insider is the problem, you were right, I deleted it and it works! thanks! – Marcos Di Paolo Jan 11 '18 at 1:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.