Profile: darmaJ-2

Problem: I have a custom audio field displayed in a Slick carousel. When the carousel paginates, I would like to stop the audio players if they are playing on other slides.

Solution: This will require custom JavaScript that is triggered upon the pagination event. Slick, for example, has an API event beforeChange that can be used to trigger your own JavaScript before the slide is changed. If the Slick carousel is initialized like this:

$('.main-carousel').slick({
    dots: false,
    arrows: true,
    appendArrows: '.button-container',
    infinite: false,
    fade: true,
    speed: 500,
    autoplay:false,
    draggable: false,
    swipeToSlide: false,
    touchMove: false,
    swipe: false,
  });

...you could try adding the beforeChange handler like this just after your initialization code:

jQuery('.main-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  jQuery('audio').each(function(){
    this.pause(); // Stop playing
}); 
});