带有图像幻灯片Cycle2的视频幻灯片

Question

如何在我的图片库中加入视频？图像和视频会在一起吗？有没有办法做到这一点？我发现了一个plugin，但它仅适用于我将用于vimeo视频的YouTube视频。

＆＃13;

＆＃13;

$(document).ready(function(){
    $('.mySlideShow').cycle({
    next: "#single-right",
    pauseOnHover: true,
    pager: "#single-pager",
    pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
    prev: "#single-left",
  });
});

＆＃13;

.single-gallery{
  width:800px;
 height:640px;
  position:relative;
}
.cycle-slideshow img {
  height:494px;
  width:auto;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

＆＃13;

<div class="single-gallery">
  <div class="mySlideShow">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
    <img src="https://www.w3schools.com/w3css/img_avatar3.png">
   
  <div id="single-pager" class="center external"></div>
    
  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

please click to see my project on codepen