如何创建一个响应式 div 容器，其左侧为文本和缩略图轮播，右侧为图像滑块？

Question

我在创建此类英雄部分时遇到问题：

最根本的问题是让文本、轮播和滑块具有响应性，在移动设备上，它们将是一个在另一个之下。而且它们不会改变高度（因为图像都有不同的高度）。

另一个问题是滑块的 div 被分为另外 2 个 div：一个用于文本，另一个用于图像本身，而我无法使其看起来像我拥有的设计图像。

我尝试过的是这样的：

HTML：

<div class="container">
        <div class="left-side">
          <div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
          <div class="carousel-container">
            <div class="carousel">
              <div class="carousel-inner">
                <div class="carousel-item"><img src="../IMAGES/1.jpeg" alt="Thumbnail 1"></div>
                <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                <!-- Add more carousel items as needed -->
              </div>
            </div>
            <div class="controls">
              <button class="control-btn" onclick="prevSlide()">❮</button>
              <button class="control-btn" onclick="nextSlide()">❯</button>
            </div>
          </div>
        </div>
        <div class="right-side">
          <div class="slider">
            <div class="slide">
                <div class="slide-text">
                    <h3>Title 1</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
              <img src="../IMAGES/1.jpeg" alt="Slide 1">
            </div>
            <!-- Add more slides as needed -->
          </div>
        </div>
      </div>

和CSS：

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    background-color: black;
    height: 90vh;
  }

  .left-side {
    width: 50%;
    flex: 1;
    justify-content: center;
    align-items: center;
  }

  .left-side h2 {
    text-align: left;
    color: #fff;
    font-size: 4rem;
  }
  .left-side p{
    text-align: left;
    color: #fff;
    font-size: 1rem;
  }

  .carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 100%;
  }

  .carousel {
    width: 100%;
  }

  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .carousel-item {
    width: 100%;
    margin-right: 20px;
    border: 1px #fff solid;
    height: 110px;

  }

  .carousel-item img {
    height: 107px;
    width: auto;
  }

  .controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .control-btn {
    cursor: pointer;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border: none;
  }

  .right-side {
    flex: 1;
    border: 2px solid #eee;
    overflow: hidden;
    position: relative;
    width: 50%;
  }

  .slider {
    width: 100%;
    display: flex;
  }

  .slide {
    flex: 1;
    padding: 0;
    width: 100%;
  }
.slide-text{
    flex: 1;
    width: 30%;
    justify-content: left;

}
  .slide img {
    flex: 1;
    width: 70%;
    height: auto;
  }

Answer 1

实际上，为了实现我需要的设计，我使用了轮播Glide.js：

<div class="carousel">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                      <ul class="glide__slides">
                        <li class="glide__slide"><img src="IMAGES/1.jpg" alt=""></li>
                        <li class="glide__slide"><img src="IMAGES/2.jpg" alt=""></li>
                        <li class="glide__slide"><img src="IMAGES/3.jpg" alt=""></li>
                        <li class="glide__slide"><img src="IMAGES/4.jpg" alt=""></li>
                        <li class="glide__slide"><img src="IMAGES/5.jpg" alt=""></li>
                        <li class="glide__slide"><img src="IMAGES/6.jpg" alt=""></li>
                      </ul>
                    </div>
                    <div class="glide__arrows" data-glide-el="controls">
                        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fas fa-arrow-left" style="color: #ffffff;"></i></button>
                        <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fas fa-arrow-right" style="color: #ffffff;"></i></button>
                    </div>
                </div>
            </div>

当然还添加了一些选项，您可以在 glide.js 文档中找到这些选项。

对于一个大滑块，我只是使用了 Flex 属性和相对定位来实现响应式设计。