我一直在网站上使用Cycle2进行图像幻灯片放映，并且我被要求在幻灯片中添加视频。
在我的静态html文件测试中，由于malsup.com网站上显示的示例，我设法让视频正常工作。
但是，当它有图像和视频的组合时，我无法完全按照我的喜好进行幻灯片制作。
当幻灯片只是图像时，我在幻灯片调用中有这个代码，它非常有效：
data-cycle-delay =“1000”data-cycle-timeout =“5000”data-cycle-speed =“900”data-cycle-pause-on-hover =“true”
但是，除非我将数据循环超时5000更改为0，如下所示，视频只会播放一小段时间，然后才能进入下一张幻灯片：
数据周期超时=“0”
是否有一种方法可以让Cycle2在一次幻灯片放映中对图像和视频采取不同的行为？
例如，如果是图像，请使用此...
data-cycle-timeout =“5000”data-cycle-pause-on-hover =“true”
如果是视频，请使用此...
数据周期超时=“0”
理想情况下，幻灯片中的任何图像都会在计数5000后进入下一张幻灯片，而任何视频都会在进入下一张幻灯片之前播放全长。例如，假设您有一个包含以下内容的幻灯片：
slide 1 = image (action: show for 5 seconds, then progress to next slide) slide 2 = 5 minute video (action: show the full 5 minute video, then progress to next slide) slide 3 = image (action: show for 5 seconds, then progress to next slide) slide 4 = image (action: show for 5 seconds, then progress to next slide) slide 5 = 3 minute video (action: show the full 3 minute video, then progress to next slide) loop
有谁知道如何使用Cycle2实现类似的功能？
CMS是一个MODx站点，因此大多数代码都可以使用。
在此先感谢您的帮助。 （对于格式错误道歉。我无法创建小提琴，所以我粘贴测试html的完整代码......）
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cycle2 YouTube</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<style>
.cycle-slideshow { max-width: 640px; margin: auto }
.cycle-slideshow > div { width: 100%; height: 100% }
.cycle-slideshow > img { width: 100%; height: 100% }
.cycle-slideshow > video { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="main">
<h2>Videos and Images</h2>
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-delay="1000"
data-cycle-speed="900"
data-cycle-pause-on-hover="true"
data-cycle-prev="#prev2"
data-cycle-next="#next2"
data-cycle-slides=">a,>img,>video"
data-cycle-youtube=true
data-cycle-youtube-autostart=true
>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<a href="http://www.youtube.com/v/f7AU2Ozu8eo?version=3&hl=en_US&rel=0">Paul Irish</a>
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<a href="http://www.youtube.com/v/seX7jYI96GE?version=3&hl=en_US&rel=0">Alex Russel</a>
</div>
<div class=center>
<a href=# id=prev2><<Prev </a>
<a href=# id=next2> Next>></a>
</div>
</div> <!-- #main -->
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.video.js"></script>
</body>
</html>
我认为最好的方法是使用Cycle2的API（http://jquery.malsup.com/cycle2/api/）手动重新创建自动播放功能。这将允许您设置每张幻灯片的时间并根据事件而不是计时器推进它。粗略地说，这就是我要这样做的方式：
首先，为每张幻灯片提供一个类或数据属性，以区分包含视频的视频和包含图像的视频。
使用paused选项暂停幻灯片播放，因此它不会自行前进
创建cycle-initialized（在幻灯片放映准备时调用）和cycle-after（在幻灯片转换后调用）事件处理程序，具有以下逻辑：
使用您添加的特殊类测试当前幻灯片是图像还是视频。
如果是图像幻灯片，请创建一个等待5000毫秒的setTimeout然后调用$('.cycle-slideshow').cycle('next')来推进幻灯片放映
如果是视频幻灯片，请使用YouTube API（https://developers.google.com/youtube/iframe_api_reference#Events）挂钩播放器的onStateChange事件。当状态变为0（这意味着视频已结束）时，请调用$('.cycle-slideshow').cycle('next')以推进幻灯片放映。您不能只将超时设置为视频长度，因为用户可能会暂停视频，或者可能需要等待缓冲。你不希望它在中游前进！
希望有所帮助！
$('#slider').cycle({
fx: 'scrollHorz',
slides: '.slide',
timeout: 6000,
pagerActiveClass: 'active'
});#slider {
width: 100%;
margin: 0;
border: 0;
.slide {
width: 100%;
display: none;
&:first-child {
display: block;
}
.slide-inner {
position: relative;
img {
width: 100%;
}
}
}
}
.video-wrap {
position: relative;
//slider resolution = 1600 x 650, so this percentage is from 650/1600=0.40625
padding-bottom: 40.625%;
height: 0;
overflow: hidden;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div id="slider" class="slider">
<div class="slide">
<img src="http://via.placeholder.com/1600x650" class="slide-image" alt="">
</div>
<!-- slide -->
<div class="slide">
<div class="video-wrap">
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Lscb4SL58X4?enablejsapi=1"></iframe> </div>
</div>
<!-- slide -->
</div>
<!-- slider -->有关详细信息，请参阅此链接。我认为哪个有用
https://www.minddevelopmentanddesign.com/blog/create-a-responsive-youtube-video-slider/