AUTOPLAY and PAUSE de carousel while the video is play

Topic: AUTOPLAY and PAUSE de carousel while the video is play

Powermdbootstrap free asked 3 years ago

  <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(); })

Arkadiusz Idzikowski staff commented 3 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 3 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

Add comment

Grzegorz Bujański staff answered 3 years ago

1 0 Best answer

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
}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

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

Powermdbootstrap

10Support score
2Questions 0Answers 0Snippets