我正在尝试对齐所有 5 张图片，以便我可以制作带有动画的图像滑块

如何解决我正在尝试对齐所有 5 张图片，以便我可以制作带有动画的图像滑块

 * {
        margin: 0;
        padding: 0;
        /* Box-sizing: border-Box; */
    }

    .slider-container {
        max-width: 1000px;
        height: 600px;
        margin: auto;
    }

    .slide-item {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .slide-item img {
        width: 100%;
        height: 100%;
    }

    <!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Custom slider</title>
</head>
<body>
    

    <!-- Slider -->

    <div class="slider-container">
        <!-- Items -->
        <div class="slide-item">
            <img src="./img-1.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-2.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-3.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-4.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-5.jpg">
        </div>


        <!-- Arrows -->
    </div>



    <script src="./script.js"></script>
</body>
</html>

我正在尝试制作一个图像滑块，但首先我需要将所有这些图像并排对齐。它们被叠在一起，但我不希望它们叠在一起。我正在处理的 slider 应该占据 container

中的全部空间

![text](https://www.pexels.com/photo/gray-and-white-wallpaper-1103970/)

![text](https://www.pexels.com/photo/down-angle-photography-of-red-clouds-and-blue-sky-844297/)

![text](https://www.pexels.com/photo/photo-of-lightning-1114690/)

![text](https://www.pexels.com/photo/collection-of-delicate-feathers-on-black-background-4004374/)

![text](https://www.pexels.com/photo/dark-night-sky-with-bright-stars-3745234/)



    <!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Custom slider</title>
</head>
<body>
    

    <!-- Slider -->

    <div class="slider-container">
        <!-- Items -->
        <div class="slide-item">
            <img src="./img-1.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-2.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-3.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-4.jpg">
        </div>

        <div class="slide-item">
            <img src="./img-5.jpg">
        </div>


        <!-- Arrows -->
    </div>



    <script src="./script.js"></script>
</body>
</html>

    * {
        margin: 0;
        padding: 0;
        /* Box-sizing: border-Box; */
    }

    .slider-container {
        max-width: 1000px;
        height: 600px;
        margin: auto;
    }

    .slide-item {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .slide-item img {
        width: 100%;
        height: 100%;
    }

-代码应该将所有图像并排对齐，而不是彼此重叠。那么只有我才能添加其余的功能。 *

帮帮我你可以添加自己的图片，没关系。

我正在尝试对齐所有 5 张图片，以便我可以制作带有动画的图像滑块

如何解决我正在尝试对齐所有 5 张图片，以便我可以制作带有动画的图像滑块

相关推荐