I'm currently facing an issue where when I try to navigate left/right through pictures on my page, it ends up moving slightly downwards instead. Despite following a tutorial to resolve this problem, there seems to be a missing piece of code that I can't figure out.
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I've discovered the cutest Corgi on TinDog and no longer need to search for love elsewhere. Woof!</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">Thanks to TinDog, my dog has found their soulmate and is no longer lonely.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
My goal is to manually view the pictures by clicking on them while also having access to previous/next buttons for navigation.