带有youtube视频、引导带5和角的多项旋转木马中的动画幻灯片

Question

我需要用youtube视频制作一个多项旋转木马，我找到了一个例子，用引导5旋转木马和卡片让它对我有效，但是当旋转木马幻灯片不流畅时，问题是卡与旋转木马幻灯片重叠，我试图改变transform: translateX(%)上的值，但动画不是流体，对此有什么建议吗？

这是carosuel代码，它显示了3张带有视频和底部标题的卡片，正如您看到的，我正在使用iframe调用youTube视频

<!--Carrusel videos-->
      <div class="col-lg-12 ms-2 mt-5">
        <div class="mx-auto my-auto justify-content-center">
          <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/rf8vM_X1g9U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="fs-5 fw-bold">Experiencia John Deere, Expo Agroalimentaria 2021</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/3xq7z7WBOGU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex text-center align-items-center justify-content-center">
                        <p  class="fs-5 fw-bold">Cosecha en la mira, Ensiladora 8300i</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/9PBeqHEopLs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">Cosecha en la mira, CH570</p>
                      </div> 
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/1jeHyrRskdk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Arandas, Jalisco</p>
                      </div>  
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-4 me-2">
                      <div class="card">
                        <iframe src="https://www.youtube.com/embed/KauOtgNuzQQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                      </div>
                      <div id="cardHeight" class="d-flex align-items-center text-center justify-content-center">
                        <p class="p-2 mb-2 fs-5 fw-bold">"EL INGE" Ayotlán, Jalisco</p>
                      </div>  
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
          </div>
        </div>
      </div>
      <!--Carrusel videos-->

这是我拥有transform: translateX()%的CSS

#cardHeight {
  height: 80px;
}

@media only screen and (min-width: 768px) {
  iframe{
    height: 24em;
  }
  .card{
    width: 100%;
  }
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}

最后是旋转木马的JS

  let items = document.querySelectorAll('.carousel .carousel-item')

  items.forEach((el) => {
    const minPerSlide = 3
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

我将留下我的项目的图像，向您展示如何在我的项目旋转木马-图像中显示这个旋转木马。

Answer 1

我找到了另一个旋转木马，使制作youtube视频旋转木马变得更容易，我使用了猫头鹰旋转木马，并在角度上使用了它--我安装了ngx-猫头鹰-旋转木马，使用起来非常容易，并能很好地处理YouTube视频，我为YouTube视频安装的唯一东西是“角”，我会在下面留下我的代码，向您展示最终的结果。

这是视频旋转木马HTML组件

<owl-carousel-o [options]="videosOptions" class="videosCarrusel">
  <ng-container *ngFor="let slide of videos">
    <ng-template carouselSlide [id]="slide.id">
        <div class="card">
          <youtube-player class="card-img-top"
              videoId= {{slide.videoId}}
              suggestedQuality="default" 
              [height]="290" 
              [width]="454" 
              [startSeconds]="0"
              [endSeconds]="">
          </youtube-player>
          <div class="card-body">
            <p class="card-text">Titulo del video</p>
          </div>
        </div>  
    </ng-template>
  </ng-container>
</owl-carousel-o>

这是视频旋转木马TS组件

import { Component, OnInit } from '@angular/core';

import { OwlOptions } from 'ngx-owl-carousel-o';

@Component({
  selector: 'app-videos-carousel',
  templateUrl: './videos-carousel.component.html',
  styleUrls: ['./videos-carousel.component.css']
})
export class VideosCarouselComponent implements OnInit {

  videos = [
    {
      id: '1',
      videoId: 'Id of the youtube video'
    },
    {
      id: '2',
      videoId: 'Id of the youtube video'
    },
    {
      id: '3',
      videoId: 'Id of the youtube video'
    },
    {
      id: '4',
      videoId: 'Id of the youtube video'
    },
    {
      id: '5',
      videoId: 'Id of the youtube video'
    }
  ]

  constructor() { }

  videosOptions: OwlOptions = {
    items: 3,
    margin: 10,
    loop: true,
    autoplay: true,
    autoplayTimeout:2500,
    autoplayHoverPause: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    dots: false,
    autoplaySpeed: 800,
    navSpeed: 800,
    navText: ["<i class='bi bi-chevron-compact-left prevArrowVideos'></i>", "<i class='bi bi-chevron-compact-right nextArrowVideos'></i>"],
    animateIn: true,
    animateOut: true,
    responsive: {
      0: {
        items: 1 
      },
      400: {
        items: 1
      },
      760: {
        items: 2
      },
      1000: {
        items: 3
      }
    },
    nav: true
  }

  ngOnInit(): void {

    //script for youtube-player
    const tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    document.body.appendChild(tag);
    
  }

}

没有问题的循环，自动播放或动画，一切运作良好，你只需要给height和width在<youtube-player>中，以适应你将要显示的视频内容，希望这有助于其他人。