<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Carousel</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 100%;
            max-width: 600px; /* Set a maximum width for the carousel */
            margin: auto;
        }
        
        @media (min-width: 1024px) {
            .swiper-wrapper {
            justify-content: center; 
            }
        }
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .video-wrapper {
            width: 100%;
            max-width: 300px; /* Set a maximum width for the videos */
            aspect-ratio: 1 / 1; /* Maintain a 1:1 aspect ratio */
            position: relative;
        }
        .video-wrapper video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="video-wrapper">
                    <video playsinline autoplay loop muted preload="metadata" poster="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211">
                        <source src="https://cdn.shopify.com/videos/c/vp/232ed2770f5e463381dd94b654fd5763/232ed2770f5e463381dd94b654fd5763.HD-1080p-7.2Mbps-16534718.mp4" type="video/mp4">
                        <img src="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211" alt="Video preview">
                    </video>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="video-wrapper">
                    <video playsinline autoplay loop muted preload="metadata" poster="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211">
                        <source src="https://cdn.shopify.com/videos/c/vp/5301926f66df4e17b59c1e5c47dc78ff/5301926f66df4e17b59c1e5c47dc78ff.HD-1080p-4.8Mbps-16535535.mp4" type="video/mp4">
                        <img src="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211" alt="Video preview">
                    </video>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="video-wrapper">
                    <video playsinline autoplay loop muted preload="metadata" poster="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211">
                        <source src="https://cdn.shopify.com/videos/c/vp/e6917b1e15114e21b8f3c20c63857b25/e6917b1e15114e21b8f3c20c63857b25.HD-1080p-3.3Mbps-29041560.mp4" type="video/mp4">
                        <img src="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211" alt="Video preview">
                    </video>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="video-wrapper">
                    <video playsinline autoplay loop muted preload="metadata" poster="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211">
                        <source src="https://cdn.shopify.com/videos/c/vp/b2d9cb07f2a449f08537a1cae8d46aa1/b2d9cb07f2a449f08537a1cae8d46aa1.HD-1080p-3.3Mbps-29158882.mp4" type="video/mp4">
                        <img src="https://section.store/cdn/shop/files/preview_images/232ed2770f5e463381dd94b654fd5763.thumbnail.0000000000_small.jpg?v=1690187211" alt="Video preview">
                    </video>
                </div>
            </div>
        </div>
        <!-- Add navigation buttons if needed -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- Add pagination if needed -->
        <div class="swiper-pagination"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            slidesPerView: 1, // Default number of slides per view
            spaceBetween: 0, // Default space between slides
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            breakpoints: {
                320: {
                    slidesPerView: 1.5,
                    spaceBetween: 0
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 0
                },
                1024: {
                    slidesPerView: 2,
                    spaceBetween: 0
                },
                1200: {
                    slidesPerView: 2,
                    spaceBetween: 0
                }
            }
        });
    </script>
</body>
</html>

On the desktop, it shows 4 slides. On the both sides it shows white spaces. Can we make it stick to both the sides, so there will be no spaces around?