I've been experimenting with animations on a webpage, particularly with turning a circle into a carousel to display more information. I was inspired by CodingNepal's infinite carousel idea. Everything looks good except the buttons (i tag) are not functioning as they should. In his original work, the buttons work perfectly, but I can't seem to figure out why they're not working on my version. Any suggestions or help would be greatly appreciated!
Here is the HTML:
<section class="container-fluid" id="container-services">
<div class="service-container">
<div class="service-canva">
<div class="rotating-circle"></div>
<div class="icons" >
<div class="imgBx" style="--i:1;" id="imgService1">
<button><img src="images/nails-service2.jpg"></button>
</div>
<div class="imgBx" style="--i:2;" id="imgService2">
<button><img src="images/nails-service2.jpg"></button>
</div>
<div class="imgBx" style="--i:3;" id="imgService3">
<button><img src="images/nails-service2.jpg"></button>
</div>
</div>
<div class="caro_canva">
<i id="left" class="fa-solid fa-angle-left"></i>
<ul class="caro">
<li class="card">
<div class="img"><img src="images/nails-service2.jpg" alt="img" draggable="false"></div>
<h2>Blanche Pearson</h2>
<span>Sales Manager</span>
</li>
<li class="card">
<div class="img"><img src="images/img-2.jpg" alt="img" draggable="false"></div>
<h2>Joenas Brauers</h2>
<span>Web Developer</span>
</li>
// more li elements here
</ul>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>
</div>
</div>
</div>
</section>
Here is the CSS:
And here is the Javascript:
I've also used bootstrap for some additional styling.
You can view the live version here.
However, I'm having trouble getting the buttons to work properly. Any insight or assistance would be greatly appreciated.