urgent post carousel

Just so you have some feedback, the ‘carousel’ comes AFTER you make the template with Ele Custom Skin for a single post within the carousel. I don’t think your going to find much help in that aspect here considering this is a support forum for the template maker, not the archive display maker.

You may want to search for some enhancement tools that actually can make styled ‘archive’ pages which is where the carousel would live.

@mazaheri

The solution that I always use in my projects is:

• create the loop template
• use elementor post widget and link with the previous loop template that I created
• use slick to create the slider

See the code I use:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
    function Main() {
        this.slick();
    }
    
    Main.prototype.slick = function() {
        const slider = jQuery(".slider .elementor-posts-container");

        slider.slick({
            slidesToShow: 3,
            slidesToScroll: 3,
            arrows: false,
            dots: true,
            infinite: false,
            autoplay: true,
            autoplaySpeed: 2000,
            responsive: [
                {
                    breakpoint: 9999,
                    settings: "unslick"
                },
                {
                    breakpoint: 1025,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 450,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

        jQuery(window).on("resize", function() {
            if (!slider.hasClass("slick-initialized")) {
                slider.slick("reinit");
            }
        });

        // Fix background collumn/section bug when using slick
        jQuery(".slick-track article").each(function() {
            if(jQuery(this).find("style").html(jQuery(this).find("style").html()).length > 0) {
                jQuery(this).find("style").html(jQuery(this).find("style").html().replace(/\#post-/g, '.post-'));
            }
        });
    };

    jQuery(document).ready(function() {
        new Main();
    });

</script>