我的Angular应用程序中有一个Splide滑块。然而，每次幻灯片改变时，一个椭圆会在图像下出现1秒钟，使幻灯片跳跃，然后消失。在inspect工具中，它看起来就像是这个不停地跳来跳去& ltspan class = & quotsplide _ sr & quot& gt...& ltspan & gt。请问有人知道这是怎么回事吗？

我的HTML:

<div class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <!-- Slide 1 content -->
                        <img src="assets/review-1.jpg" alt="">
                        <div class="slideDetails">
                            <p>
                                “
                            </p>
                            <p>
                                Excellent service from Company! They were prompt, professional, and handled the
                                installation with precision. Highly recommend their services!
                            </p>
                            <h1>
                                - Romulus Willifrid, Manchester
                            </h1>
                        </div>
                    </li>
                    <li class="splide__slide">
                        <!-- Slide 2 content -->
                        <img src="assets/review-2.jpg" alt="">
                        <div class="slideDetails">
                            <p>
                                “
                            </p>
                            <p>
                                Company exceeded my expectations with their top-notch service. Their knowledgeable
                                team ensured a smooth installation process, and their attention to detail was
                                impressive.
                            </p>
                            <h1>
                                - Emmy Siana, London
                            </h1>
                        </div>
                    </li>
                    <li class="splide__slide">
                        <!-- Slide 3 content -->
                        <img src="assets/review-3.jpg" alt="">
                        <div class="slideDetails">
                            <p>
                                “
                            </p>
                            <p>
                                I couldn't be happier with the company's exceptional service. Their team went above
                                and beyond to ensure a seamless installation, providing expert guidance and
                                delivering outstanding results.
                            </p>
                            <h1>
                                - Vince Utu, Birmingham
                            </h1>
                        </div>
                    </li>

                    <!-- Add more slides as needed -->
                </ul>
            </div>
            <div class="splide__arrows">
                <button class="splide__arrow splide__arrow--prev">
                    <mat-icon>keyboard_arrow_left</mat-icon>
                </button>
                <button class="splide__arrow splide__arrow--next">
                    <mat-icon>keyboard_arrow_right</mat-icon>
                </button>
            </div>
        </div>
    </div>
</div>

CSS:

.sliderContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}

.splide {
    width: 100%;
    max-width: 100%; 
}

.splide__list {
    width: 100%;
    display: flex;
    flex-wrap: nowrap; /* Prevent slides from wrapping to the next line */
    
  }
  
  .splide__slide {
    flex: 0 0 100%; /* Each slide takes 100% width */
    padding: 0; /* Remove any padding that may affect the width */
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 40px;
    
  }
  
  .splide__slide img {
    width: 100%; /* Make the image fill its slide */
    max-width: 450px;
    height: auto; /* Maintain the aspect ratio of the image */
    border-radius: 12px;
  }


  .slideDetails p {
    font-size: 28px;
    margin-bottom: 30px !important;
    font-weight: 400;
  }

  .slideDetails h1 {
    font-size: 18px;
    font-weight: 300;
  }
  
  .splide__arrows {
    display: flex;
    justify-content: flex-end;
    column-gap: 10px;
  }

  .splide__arrows button {
    border: none;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 10px 10px !important;
    display: flex;
    justify-content: center;
    align-items: center ;
  }

TS:

ngAfterViewInit(): void {
    new Splide('.splide', {
      type: 'loop',
      perPage: 1,
      perMove: 1,
      autoplay: true,
      interval: 3000, // Adjust the interval as desired
      focus: 'center', // Add this line to center the active slide
      pagination: false, 
      
    }).mount();
  }