Topic: AUTOPLAY and PAUSE de carousel while the video is play
<main>
<mdb-carousel class="carousel slide carousel-fade" id="myCarousel" [interval]="10000" [animation]="'fade'" autoplay loop controls>
<mdb-carousel-item>
<div class="carousel-item active">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"
alt="First slide">
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9" autoplay loop >
<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</mdb-carousel-item>
<mdb-carousel-item>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
</div>
</mdb-carousel-item>
</mdb-carousel>
</div>
</div>
$('#myCarousel').carousel({ interval: 1000 }).on('slide.bs.carousel', function () { document.getElementById('player').pause(); });
$('#myCarousel').bind('slide.bs.carousel', function () {
document.getElementById('player').play();
})
Standard Bootstrap events do not work in MDB Angular. So you won't be able to catch the event slide.bs.carousel. You should use activeSlideChange output.
<mdb-carousel mdb-carousel [animation]="'slide'" (activeSlideChange)="onSlideChange($event)">
</mdb-carousel>
onSlideChange(event) {
// do something
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 12.0.0
- Device: laptop, phone
- Browser: chrome
- OS: windows, android, ios
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 2 years ago
@Powermdbootstrap Please provide more information about the problem.
Which MDB product do you use? The snippet you provided is from MDB jQuery and according to the specification of this issue you use MDB5 Angular version.
Powermdbootstrap free commented 2 years ago
hi thanks for helping me
now i using MDB 4 12.0.0 Angular Free package sorry i am new in the blog thanks