Web carousel very slow on Safari desktop, fine everywhere else [closed]

I have a web carousel on a site I built (here) that slides automatically (although you can also use controls to move through the slides manually). It works fine on all browsers, and manual controls are no problem, but it's very very slow to begin the automatic scroll on Safari's desktop version. I've been reading that this is a common issue, but have not succeeded in learning any solutions. I am running Safari Version 18.6 (20621.3.11.11.3)

Here is the relevant HTML on the page:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> <li data-target="#myCarousel" data-slide-to="5"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/banner3.png" alt="illustration from Barbara's book, Nothing Stopped Sophie" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> <div class="item"> <img src="images/banner8.jpg" alt="illustration from Barbara's book, Vroom!" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> <div class="item"> <img src="images/banner2.png" alt="illustration from Barbara's book, Tomfoolery" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> <div class="item"> <img src="images/banner7.jpg" alt="illustration from Barbara's book, Three Little Kittens" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> <div class="item"> <img src="images/banner6a.jpg" alt="illustration from Barbara's book, Adele &amp; Simon" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> <div class="item"> <img src="images/banner5.jpg" alt="illustration from Barbara's book, Vroom!" width="1200" height="637"> <div class="carousel-caption"> <h3></h3> <p></p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>