Woocommerece Products slider with item count

I searching in google about what i want but i can't found any plugin meet my needs

I need to display product in slider and when make slide item count change like in attachment beside Pesta & Seafood (1-4 of 9)

Here is example using Slick carousel
Here is preview of the result - https://prnt.sc/NNKZ-fPkCjDF
How to integrate it in your project - https://kenwheeler.github.io/slick/

This is the html structure

<div class="carousel-with-counter">
    <div class="counter">
        <span class="current"></span> of <span class="total"></span>
    </div>
    <div class="carousel">
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
        <div class="item"><img src="https://dummyimage.com/270x200/000/fff" /></div>
    </div>
</div>

This is the js code

(function ($) {  
    $(document).ready(function() {
        carousel_with_counter();
    });
    function carousel_with_counter() {
        var $carousel = $('.carousel-with-counter .carousel');

        $carousel.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
            var totalSlides = slick.slideCount;
            var slidesToShow = slick.options.slidesToShow;
            var slideRangeStart = slick.slickCurrentSlide() + 1;
            var slideRangeEnd = Math.min(slideRangeStart + slidesToShow - 1, totalSlides);

            var slideRange = slideRangeStart + '-' + slideRangeEnd;

            $('.carousel-with-counter .counter .current').text(slideRange);
            $('.carousel-with-counter .counter .total').text(totalSlides);
        });

        $carousel.slick({
            slidesToShow: 4,
            slidesToScroll: 4,
            arrows: true,
            dots: false,
        });
    }
})(jQuery);

Here is how to use it as shortcode - shortcode should look like [carousel_with_counter ids="1,2,3,4"]

add_shortcode('carousel_with_counter','products_for_carousel');
function products_for_carousel($atts) {
    
    $product_ids = explode(",", $atts['ids']);

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1,
        'post__in' => $product_ids
    );
    
    ob_start();
    $q = new WP_Query($args);

    if($q->have_posts()):
    echo '<div class="carousel-with-counter"><div class="counter"><span class="current"></span> of <span class="total"></span></div>';
        echo '<div class="carousel">';
            while($q->have_posts()): $q->the_post();
                echo '<div class="item">';
                    wc_get_template_part('content','product');
                echo '</div>';
            endwhile;
        echo '</div>';
    echo '</div>';
    endif;
    wp_reset_query();
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}

Alternative solution with taxonomy term_id
Here is how to use it as shortcode - shortcode should look like [carousel_with_counter id="1"]

add_shortcode('carousel_with_counter','products_for_carousel');
function products_for_carousel($atts) {
    
    $category_id = $atts['id']);

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => -1, //Since we query by taxonomy we may have alot of products feel free to restrict
        'tax_query' => array(
          array(
           'taxonomy' => 'product_cat',
           'field' => 'term_id',
           'terms' => $category_id 
          )
        )
    );
    
    ob_start();
    $q = new WP_Query($args);

    if($q->have_posts()):
    echo '<div class="carousel-with-counter"><div class="counter"><span class="current"></span> of <span class="total"></span></div>';
        echo '<div class="carousel">';
            while($q->have_posts()): $q->the_post();
                echo '<div class="item">';
                    wc_get_template_part('content','product');
                echo '</div>';
            endwhile;
        echo '</div>';
    echo '</div>';
    endif;
    wp_reset_query();
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}