How can i get swipe on mobile and carousel on desktop in Related products section (DAWN)

[NOT1]

I have used these 2 codes in related-products.liquid and theme.liquid 
and the option is showing in theme customizer but its not working what can i do now can anyone pls help. Thanks

[Small_Task_Help]

Hi,

• You need to utilize a JavaScript library like Swiper.js
• Add Swiper.js to Theme
• Link Swiper.js to Theme (theme.liquid)
• related-products.liquid or the section controls the related products display wrap the product list in the Swiper.js HTML structure
• Initialize Swiper for mobile and desktop by using script

Script example

<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1, // Mobile setting: 1 product per view
        spaceBetween: 10,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            768: {
                slidesPerView: 3, // Desktop setting: 3 products per view
                spaceBetween: 30,
            },
            1024: {
                slidesPerView: 4, // Larger desktop view
                spaceBetween: 40,
            },
        },
    });
</script>

Adjust CSS for styling 

[NOT1]

Can you please give me a step by step guide how can i get swipe on mobile and carousel on desktop in Related products section