<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Continuous Slick Slider</title>
    <!-- Include Slick CSS -->
    <link rel="stylesheet" type="text/css" href="slick.min.css" />
    <link rel="stylesheet" type="text/css" href="slick-theme.min.css" />
    <style>
        /* Your Custom CSS */
        .saas-bar-logo-1 {
            padding: 60px 0;
            width: 100vw; /* Full width */
            height: auto; /* Adjust height as needed */
            overflow: hidden; /* Prevent overflow */
        }

        .logos .slick-track {
            display: flex;
            align-items: center;
            width: auto; /* Allow flexibility */
        }

        .logos .slick-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 150px; /* Adjust based on your logo size */
        }

        .logos .slick-slide img {
            margin: 0 auto;
            max-width: 250px;
            display: block;
        }

        @media (min-width: 768px) {
            .logos .slick-slide {
                margin: 0 15px; /* Adjust margin for larger screens */
            }
        }
    </style>
</head>
<body>

<div class="saas-bar-logo-1">
    <div class="logos">
        <div class="logo"><img src="logo1.png" alt="Logo 1"></div>
        <div class="logo"><img src="logo2.png" alt="Logo 2"></div>
        <div class="logo"><img src="logo3.png" alt="Logo 3"></div>
        <div class="logo"><img src="logo4.png" alt="Logo 4"></div>
        <div class="logo"><img src="logo5.png" alt="Logo 5"></div>
        <div class="logo"><img src="logo6.png" alt="Logo 6"></div>
        <div class="logo"><img src="logo7.png" alt="Logo 7"></div>
        <div class="logo"><img src="logo8.png" alt="Logo 8"></div>
    </div>
</div>

<!-- Include jQuery -->
<script src="../js/jquery-3.6.0.min.js"></script>
<!-- Include Slick JS -->
<script src="../js/slick.min-2.js"></script>
<script>
    $(document).ready(function() {
        $('.logos').slick({
            slidesToShow: 5, // Adjust to show more logos
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 0, // Set to 0 for continuous scrolling
            speed: 5000, // Speed of the scroll (increase for slower scroll)
            cssEase: 'linear', // Smoother transition effect
            infinite: true, // Enable infinite looping
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 3, // Adjust for smaller screens
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1, // Show 1 logo on very small screens
                    }
                }
            ]
        });
    });
</script>

</body>
</html>