<!-- Swiper Slider Structure -->
<div>
    <div class="swiper-container">
        <!-- Swiper Container -->
        <div class="swiper logo-slider">
            <!-- Swiper Wrapper -->
  <div class="swiper-wrapper">
                <!-- Swiper Slides -->
                <div class="swiper-slide">
                    <a href="https://swarnavahini.lk/"><img src="/Uploads/logo.png" alt="TV Channel Logo">
                </div>
                <div class="swiper-slide">
                    <a href="http://shreefm.lk/" target="_blank"><img src="/Uploads/sri.png" alt="TV Channel Logo">
                </div>
                <div class="swiper-slide">
                    <a href="http://ranfm.lk/" target="_blank"><img src="/Uploads/ran2.png" alt="TV Channel Logo">
                </div>
                <div class="swiper-slide">
                    <a href="http://efm.lk/" target="_blank"><img src="/Uploads/efm.png" alt="TV Channel Logo"></a>
                </div>
                <div class="swiper-slide">
                    <img src="/Uploads/etv.png" alt="TV Channel Logo">
                </div>

            </div>
           
            <!-- Pagination Dots -->
           
        </div>
    </div>
</div>

<!-- Swiper CSS (Include this if not already included in your project) -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- Swiper Initialization Script -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const logoSlider = new Swiper('.logo-slider', {
            slidesPerView: 5, // Show 5 logos on desktop
            spaceBetween: 10, // 10px space between slides
            loop: true, // Enable infinite loop
            autoplay: {
                delay: 3000, // Slide every 3 seconds
                disableOnInteraction: false, // Continue autoplay after user interaction
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 8,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 10,
                },
                992: {
                    slidesPerView: 5,
                    spaceBetween: 10,
                },
            },
        });
    });
</script>

<style>
    /* Swiper Glassy Container */
    .swiper-container {
        max-width: 1200px;
        margin: 40px auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        color: white;
    }

    .logo-slider {
        padding: 0 20px; /* Inner padding for navigation and pagination */
    }

    .swiper-slide {
        background: rgba(255, 255, 255, 0.15); /* Glassy background for slides */
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 1.25rem;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto; /* Allow height to adjust to content */
    }

    .swiper-slide img {
        height: 50px;
        width: auto;
        display: block;
        margin: 0 auto;
    }

    .swiper-button-prev,
    .swiper-button-next {
        color: #ffffff; /* White arrows for visibility */
    }

    .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.5); /* Glassy pagination dots */
    }

    .swiper-pagination-bullet-active {
        background: #FFC107; /* Active dot matches button color */
    }

    /* Responsive Adjustments for Swiper */
    @media (max-width: 991px) {
        .swiper-container {
            border-radius: 10px;
        }
        .swiper-slide {
            border-radius: 10px;
        }
    }

    @media (max-width: 576px) {
        .swiper-container {
            border-radius: 8px;
        }
        .swiper-slide {
            border-radius: 8px;
        }
        .swiper-slide img {
            height: 40px; /* Slightly smaller logo on mobile */
        }
    }
</style>