带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中

Animation slide in multi item carousel with youtube videos Bootstrap 5 and Angular(带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片)

本文介绍了带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要用YouTube视频制作多项旋转木马,我找到了一个例子,并使用Bootstrap 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
    }
})
我将留下一张我的项目的图像,向您展示如何在我的项目中显示此旋转木马 carousel-image

推荐答案

我发现了另一个更容易制作Youtube视频旋转木马的旋转木马,我对此使用了Owl carousel,并在角度安装ngx-owl-carousel-o使用它ngx-owl-carousel-o非常好地使用Youtube视频,我为Youtube视频安装的唯一东西是YouTube player对于角度,我将留下我的代码来向您展示最终结果

这是视频传送带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);
    
  }

}

循环、自动播放或动画没有问题,一切正常,您只需在<youtube-player>中添加heightwidth以适应您要显示的视频内容,希望这对其他人有所帮助。

这篇关于带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中

基础教程推荐