带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片 [英] Animation slide in multi item carousel with youtube videos Bootstrap 5 and Angular
本文介绍了带有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()%
#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
}
})
推荐答案
我发现了另一个更容易制作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>中添加height和width以适应您要显示的视频内容，希望这对其他人有所帮助。
这篇关于带有YouTube视频Bootstrap 5和Angel的多项目旋转木马中的动画幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
