Shopify幻灯片放映，想要与视频一起制作带有视频的幻灯片

Question

我有一家我正在研究的shopify商店。 https://www.bonmarcheonline.com/ 我想幻灯片放映在视频的持续时间停在第二张幻灯片上，然后恢复到第一张幻灯片并保持在那里。

继承人html

Authorization: Bearer mF_9.B5f-4.1JqM
                     ^ nothing should be here

CSS

{% assign slider_enabled = true %}
<div class="flexslider">
  <ul class="slides">
    {% for i in (1..6) %}
      {% capture slide %}slide_{{ i }}{% endcapture %}
      {% capture slide_link %}slide_{{ i }}_link{% endcapture %}
      {% capture slide_img%}slide_{{ i }}{% endcapture %}
      {% capture slide_alt %}slide_{{ i }}_alt{% endcapture %}
      {% if settings[slide] %}

    <li><img src="https://cdn.shopify.com/s/files/1/1418/7648/files/slide1.jpg?17428083521508450295">
    <div class="banner_title">
          <h1>A colorful lifestyle</h1>
          <div class="banner-button">
          <a href="https://www.bonmarcheonline.com/collections/best-sellers?sort_by=best-selling{{ settings[slide_link] }}">shop now</a>
            </div>
          </div>
      </li>
    <li><iframe div class="video" width="560" height="315" src="https://www.youtube.com/embed/NQFGjQ-gVJw?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></li>
          <a href="{{ settings[slide_link] }}" class="slide-link">
            {{ slide_img | asset_img_url: '1920x1024' | img_tag: settings[slide_alt] }}
          </a>
          <div class="banner_title">
          <h1>A colorful lifestyle</h1>
          <div class="banner-button">
          <a href="{{ settings[slide_link] }}">shop now</a>
            </div>
          </div>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
    </div>

这是javascript

.unslider {
  overflow: auto;
  margin: 0;
  padding: 0;
}
.unslider-wrap {
  position: relative;
}
.unslider-wrap.unslider-carousel > li {
  float: left;
}
.unslider-vertical > ul {
  height: 100%;
}
.unslider-vertical li {
  float: none;
  width: 100%;
}
.unslider-fade {
  position: relative;
}
.unslider-fade .unslider-wrap li {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 8;
}
.unslider-fade .unslider-wrap li.unslider-active {
  z-index: 10;
}
.unslider ul, .unslider ol, .unslider li {
  list-style: none;
  /* Reset any weird spacing */
  margin: 0;
  padding: 0;
  border: none;
}
.unslider-arrow {
  position: absolute;
  left: 20px;
  z-index: 2;
  cursor: pointer;
}
.unslider-arrow.next {
  left: auto;
  right: 20px;
}

.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}

jquery

window.timberSlider = window.timberSlider || {};

timberSlider.cacheSelectors = function () {
  timberSlider.cache = {
    // Home Page
    $slider: $('.flexslider')
  }
};

timberSlider.init = function () {
  timberSlider.cacheSelectors();
  timberSlider.sliders();
};

timberSlider.sliders = function () {
  var $slider = timberSlider.cache.$slider,
      sliderArgs = {
        animation: '{{ settings.slider_home_transition }}',
        animationSpeed: 500,
        pauseOnHover: true,
        keyboard: false,
        slideshow: {{ settings.slider_home_auto }},
        slideshowSpeed: {{ settings.slider_home_rate }},
        controlNav: {{ settings.slider_home_show_dots }},
        smoothHeight: true
      };

  if ($slider.length) {


 if ($slider.find('li').length === 3) {
      sliderArgs.slideshow = false;
      sliderArgs.slideshowSpeed = 0;
      sliderArgs.controlNav = false;
      sliderArgs.directionNav = false;
    }  

    $slider.flexslider(sliderArgs);
  }

};


// Initialize slider on docready
$(window).on('load', function() {
  timberSlider.init();
});