Добавление ссылки вокруг DIV Breaks Bootstrap 4 Carousel

Question

Я использую Bootstrap 4 и использую компонент Карусель с WordPress. Это работало отлично, но я хотел добавить ссылку вокруг изображения. Когда я это делаю, карусель перестает скользить.

(Примечание. Я решил заменить индикаторы карусели текстовыми ссылками, что работает так же.)

Ссылка, которую я добавляю, работает для первого слайда и приведет меня к URL, но она не выполняет автоматическое скольжение и не реагирует на щелчки по ссылкам, которые должны вызывать слайд. Я прокомментировал код, чтобы выделить проблемные области. Помощь приветствуется.

Обтекание, содержащее фоновое изображение с тегом, приводит к тому, что карусель больше не перемещается на следующий слайд. Я хочу, чтобы с фоновым изображением можно было кликать, но, конечно, я также хочу, чтобы при появлении запроса карусель переместилась на следующий слайд.

<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="7000">

  <div class="carousel-inner"> 
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

     <!-- Adding the below <a> tag causes the issue -->
     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><div style="background: url('<?php echo $backgroundImg[0] ?>') no-repeat; background-size:cover;" class="carousel-item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>">

      <div class="container">
        <div class="carousel-caption text-left">
          <h1><?php the_title(); ?></h1>
          <p class="d-none d-sm-block"><?php echo get_the_excerpt(); ?></p>
        </div><!-- END CAPTION -->
      </div><!-- END CONTAINER -->
    </div><!-- END CAROUSEL ITEM --></a> <!-- End attempt at linking image -->
    <?php endwhile; endif; ?>
  </div><!-- END CAROUSEL INNER -->

    <div class="container-fluid">
      <div class="row slider-row carousel slide" data-ride="carousel" data-interval="7000">
        <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div class="col-sm-4 feature-box highlight carousel1">

        <!-- The <a> tag below stops working -->
            <a data-target="#my-carousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="carousel-link <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"><?php the_title(); ?></a>

        </div><!-- END COL -->
        <?php endwhile; endif; ?>
        <?php rewind_posts(); ?>
      </div><!-- END ROW -->
    </div><!-- END CONTAINER -->
</div> <!-- END MY CAROUSEL -->