[ Elementor ] Slick Slider + Elementor Loop Grid

elementor-html-widget-1.html

<!-- add a HTML widget -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script>
jQuery(document).ready(function(){
  jQuery('.ds-slick-slide .elementor-loop-container').slick({
    centerMode: true,
    centerPadding: '0',
    slidesToShow: 3,
    slidesToScroll: 1,
    prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
    nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>'
  });
  // remove Elementor loop style so it won't become a slide
  jQuery('.ds-slick-slide.first-loop .elementor-loop-container').slick('slickRemove', 0);
});
</script>

elementor-html-widget-2.html

<!-- add another HTML widget -->
<!-- paste in loop grid widget's style -->

elementor-loop-grid-widget.html

<!-- Elementor loop grid widget -->
<div class="elementor-loop-container">
  <style>
    <!-- Elementor loop style -->
  </style>
  <div class="e-loop-item">
    <!-- Loop content -->
  </div>
  <div class="e-loop-item">
    <!-- Loop content -->
  </div>
</div>