我希望在BootStrap旋转木马中的悬停项目上有1/1的滑动和悬停效果

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 指示器 -->
  <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>
  </ol>

  <!-- 幻灯片 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="slide1.jpg" alt="Slide 1">
      <div class="carousel-caption">
        <h3>Slide 1</h3>
        <p>Description for Slide 1</p>
      </div>
    </div>
    <div class="item">
      <img src="slide2.jpg" alt="Slide 2">
      <div class="carousel-caption">
        <h3>Slide 2</h3>
        <p>Description for Slide 2</p>
      </div>
    </div>
    <div class="item">
      <img src="slide3.jpg" alt="Slide 3">
      <div class="carousel-caption">
        <h3>Slide 3</h3>
        <p>Description for Slide 3</p>
      </div>
    </div>
  </div>

  <!-- 控制按钮 -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

.carousel-inner .item {
  height: 100vh; /* 设置幻灯片高度为视口高度 */
}

.carousel-inner .item img {
  width: 100%; /* 图片宽度填满父容器 */
  height: 100%; /* 图片高度填满父容器 */
  object-fit: cover; /* 图片按比例缩放并填满容器 */
}

.carousel-inner .item:hover {
  transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */
  transition: transform 0.5s ease; /* 添加过渡效果 */
}

$(document).ready(function() {
  // 初始化旋转木马
  $('#myCarousel').carousel();

  // 鼠标悬停时暂停旋转
  $('#myCarousel').hover(function() {
    $(this).carousel('pause');
  }, function() {
    $(this).carousel('cycle');
  });
});