2

I use jquery owl caorusel (http://owlgraphic.com/owlcarousel )

Sliders are 2 and in these videos from Youtube. When I click on the play this slider has to stop. Can anyone help?

My app

// owl home
$(".slider-home .owl-carousel").owlCarousel({
    rewindNav: true,
    navigation: true,
    pagination: false,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    mouseDrag: false,
    autoPlay: true,
    stopOnHover: true,
    rewindSpeed: 5000,
    video:true,
    lazyLoad:false,
    afterMove : function(){
        $('video').each(function () {
            this.pause();
            $('.slider-video').next().show();
        });
    }
});

and html

<div class="slider-home">
<div class="owl-carousel owl-theme">
    <div class="item" style="background-image: url('tmp/car1920x1080.jpg');">
        <div class="item-inner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-9">
                        <h1>header1</h1>
                    </div> <!-- .col -->
                </div> <!-- .row -->
            </div> <!-- .container -->
        </div> <!-- .item-inner -->
    </div> <!-- .item -->
    <div class="item disable-owl-swipe">
        <iframe class="youtube-player" width="560" height="315" src="http://www.youtube.com/embed/9UlBsQLjjWI?loop=1&playlist=9UlBsQLjjWI&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
        <div class="item-inner">
            <div class="container">
                <div class="row">
                    <div class="col-sm-9">
                        <h1>header2</h1>
                    </div> <!-- .col -->
                </div> <!-- .row -->
            </div> <!-- .container -->
        </div> <!-- .item-inner -->
    </div> <!-- .item -->
</div>

Kwiatkowski
  • 519
  • 2
  • 7
  • 11
  • I think you will find the answer in here: http://stackoverflow.com/questions/28371924/pause-html5-video-in-owl-carousel-on-slide – mfpinheiro Jan 08 '16 at 16:44

0 Answers0