Question

我有一个动态的引导轮播，每个幻灯片有两个图像。为此，我基本上是遍历图像并克隆上一张幻灯片中的网络图像。这是轮播的代码：

$('.multi-item-carousel .item.img-item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  if ($(next).hasClass("item-pre-video")){
 next.children(':first-child').clone(true,true).addClass('cloned-image').appendTo($(this)).remove(next.children(':first-child'));
 }

});

html看起来像这样

<div id="Carousel" class="carousel multi-item-carousel slide">
  <div class="grid grid--no-gutters">
<div class="carousel-inner">
    {% assign variable = 0 %}
      {% for image in product.images %}
   <div class="item">
   <div class="grid__item one-half carousel-padding">
           <img class="{{ image.id }}_test  prod-zoom" src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}" class="product-zoom"/>
   </div>
 </div>
     {% endfor %}
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">{% include 'carousel-left'%}</a>
    <a data-slide="next" href="#Carousel" class="right carousel-control">{% include 'carousel-right'%}</a>
</div>
</div>

现在，我还需要向该轮播中添加视频，该视频是通过产品图片的alt标签设置的。该视频应该是轮播中的完整项目，因此我需要通过简单地给它一个不同的类将其从克隆函数中排除，因此现在标记看起来像这样：

<div id="Carousel" class="carousel multi-item-carousel slide">
  <div class="grid grid--no-gutters">
<div class="carousel-inner">
    {% assign variable = 0 %}
      {% for image in product.images %}
      {% if image.alt contains 'https' %}
         <div class="item item-video">
           <div class="grid__item carousel-padding">
             <video width="100%" height="100%" controls>
            <source src="{{image.alt}}" type="video/mp4">
            </video>
</div>
  </div>
   <div class="item">
   <div class="grid__item one-half carousel-padding">
           <img class="{{ image.id }}_test  prod-zoom" src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}" class="product-zoom"/>
   </div>
 </div>
     {% endfor %}
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">{% include 'carousel-left'%}</a>
    <a data-slide="next" href="#Carousel" class="right carousel-control">{% include 'carousel-right'%}</a>
</div>
</div>

这很好用，但是我的问题是我最终将幻灯片放到视频之前只是一张图像，因为视频没有被克隆。因此，基本上，对于视频之前的图像，我需要对其进行克隆，但是请删除原始图像，因为随后的视频将不会被克隆。我尝试通过在视频之前为图像提供一个名为'item-pre-video'的类来执行此操作，然后像这样隐藏该项目：

  if ($(next).hasClass("item-pre-video")){
    var test = $(next.children(':first-child'));
 test.clone(true,true).addClass('cloned-image').appendTo($(this));
 $('.item-pre-video').css('display','none');
 }

但是，问题在于轮播仍然转到设置为不显示的幻灯片，因此，我想如果有该类，就需要跳过幻灯片？有什么想法吗？

带有多个幻灯片的自举旋转木马

0 个答案: