title: add autoplay for video in slick carousel
body: <p>I use slick carousel <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">http://kenwheeler.github.io/slick/</a> on my page and now I need to add video with autoplay in it.<br>
  I use this code<br>
  HTML</p>
  
  <pre><code>&lt;div class="main-slider" id="main-slider"&gt;
              &lt;div&gt;
                  &lt;div class="video-wrapper"&gt;
                      &lt;video autoplay loop class="pageBackground-video"&gt;
                          &lt;source src="/Content/video/332145276.mp4" type="video/mp4"&gt;
                      &lt;/video&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;div class="video-wrapper"&gt;
                      &lt;video autoplay loop class="pageBackground-video"&gt;
                          &lt;source src="/Content/video/332145276.mp4" type="video/mp4"&gt;
                      &lt;/video&gt;
                  &lt;/div&gt;
              &lt;/div&gt;          
          &lt;/div&gt;
  </code></pre>
  
  <p>and script</p>
  
  <pre><code>$('#main-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 30000,
        dots: true,
        infinite: true,
        adaptiveHeight: true,
        arrows: false
    });
  </code></pre>
  
  <p>but autoplay doesn't work. Is there any way to make autoplay work?</p>
  
  <p><strong>upd</strong>
  I tried to use </p>
  
  <pre><code>$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var video = currentSlide.children('video').get(0).play();
  });
  </code></pre>
  
  <p>but I get an error <code>Uncaught TypeError: currentSlide.children is not a function</code> because <code>currentSlide</code> it's just a number (0,1,etc). How to get current element?</p>
  
  <p><strong>upd2</strong> I used this code and it works</p>
  
  <pre><code>$('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
      $('#main-slider .slick-slide').find('video').get(0).pause();
      var video = $('#main-slider .slick-active').find('video').get(0).play();
  });
  </code></pre>
  
  <p>but now autoplay work for all video perfectly but only after first slick changes. How to make it work for the first video after page only loaded.</p>
  
  <p><strong>upd3</strong> I used this code </p>
  
  <pre><code> var video = $('#main-slider .slick-active').find('video').get(0).play();
  
    $('#main-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
      $('#main-slider .slick-slide').find('video').get(0).pause();
      var video = $('#main-slider .slick-active').find('video').get(0).play();
  });
  </code></pre>
  
  <p>and now all work as I want but I'm afraid my code is ugly (</p>