Слайдер карусели первого видео по-прежнему воспроизводится при скольжении и воспроизводит второе - PullRequest
Новая
       18

Слайдер карусели первого видео по-прежнему воспроизводится при скольжении и воспроизводит второе

0 голосов
/ 21 сентября 2018

Я работаю над видео галереей, и я использую слайдер Slick для представления этого в форме, подобной этой:

enter image description here

Это HTMLкод, который я использую для этого дизайна: 

<section id="video_tour" class="slider" style="background-color: #1A1A1A;">
        <div class="slider-for">
            <div class="video_box">
                <h3>An introduction to ApexSQL Diff</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/DMnTBpzH1OQ?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
            <div class="video_box">
                <h3>An introduction to ApexSQL BI Monitor</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/fuzp6AHnJEA?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
             <div class="video_box">
                <h3>An introduction to ApexSQL Doc</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/AlQ5HIRHj70?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
             <div class="video_box">
                <h3>ApexSQL Doc - Automating SSIS package documentation</h3>
                <div class="videoWrapper">
                    <iframe class="player" src="https://www.youtube.com/embed/oLoxTwjHHnw?showinfo=0?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
        </div>
        <div class="slider-nav">
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-Diff.png" alt="">
                <p class="video_caption">An introduction to ApexSQL Diff</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-BI-Monitor.png" alt="">
                <p class="video_caption">An introduction to ApexSQL BI Monitor</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/intro-ApexSQL-Doc.png" alt="">
                <p class="video_caption">An introduction to ApexSQL Doc</p>
            </div>
            <div>
                <img class="nav_image" src="../sliderslick/videos/SSIS/SSIS-ApexSQL-Doc.png" alt="">
                <p class="video_caption">ApexSQL Doc - Automating SSIS package documentation</p>
            </div>
        </div>
    </section>

Первая часть кода под class = "slider-for" является верхней частью галереи и содержит кадры для видео.Вторая часть кода под class = "slider-nav" предназначена для навигации по ползункам, и здесь я использую изображения из видео, а также стрелки из галереи для навигации.

Для JS я использую код, предоставленный Slider Slick: 

$('.slider-for').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '.slider-nav'
        });
        $('.slider-nav').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          asNavFor: '.slider-for',
          dots: true,
          centerMode: true,
          focusOnSelect: true
        });

Моя проблема с этим дизайном заключается в том, что когда я воспроизводю видео X и переходю к видео Y, видео Xвсе еще играет.Когда я запускаю видео Y, оба видео воспроизводятся одновременно.Как я могу остановить воспроизведение видео при смене слайда?

Я попробовал решение из этих вопросов, но это не сработало.

Слайдер-слайдер останавливает видео на YouTube при смене слайдов

Мои знания по JS ограничены, поэтому помощь в этом будет более чем приветствоваться.

...