External control for Easy Slider

Hey photographie-tous-azimuts,
Thanks for your patience, try this code in your child theme function.php:

function custom_ingredientItems_script() { ?>
  <script>
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // Get all ingredient list items
  const ingredientItems = document.querySelectorAll('.flex_column li');
  
  // Get all slider navigation dots
  const slideDots = document.querySelectorAll('.avia-slideshow-dots .goto-slide');
  
  // Exit early if either element group doesn't exist
  if (ingredientItems.length === 0 || slideDots.length === 0) {
    return;
  }
  
  // Make sure we have matching items
  const itemCount = Math.min(ingredientItems.length, slideDots.length);
  
  // Add click handlers to each ingredient item
  for (let i = 0; i < itemCount; i++) {
    const li = ingredientItems[i];
    const dot = slideDots[i];
    
    // Add cursor pointer style
    li.style.cursor = 'pointer';
    
    // Add click event
    li.addEventListener('click', function() {
      // Trigger click on corresponding slider dot
      dot.click();
      
      // Optional: Add visual feedback
      ingredientItems.forEach(item => item.style.fontWeight = 'normal');
      li.style.fontWeight = 'bold';
    });
  }
  
  // Optional: Highlight first ingredient by default
  if (ingredientItems.length > 0) {
    ingredientItems[0].style.fontWeight = 'bold';
  }
});
</script>
  <?php
}
add_action( 'wp_footer', 'custom_ingredientItems_script', 99 );

In my test it is working.

Best regards,
Mike

Hi,
Thank you for your review on Theme Forest, glad that this helped. If you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

Best regards,
Mike