Topic Tag: Setting up custom fields

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

Problem:

How to add an existed custom field to another new field group.

Solution:

You can edit the field group, click "Add New Field" button-> Choose from previously created fields, see my screenshot, find and select the exist field "ID (In)", and test again

Relevant Documentation: