html - HTML 和 CSS 中的图像 slider

Question

我需要单独使用 HTML 和 CSS 制作每张幻灯片包含两个图像的图像 slider 。

我的尝试:

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div>

      <div class="col-sm-6">
        <div class="carousel-inner">
          <div class="item active">
            <img src="./resources/images/image1.jpg" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 1</h3>
              <p>Image 1 Image 1</p>
            </div>
          </div>

          <div class="item">
            <img src="./resources/images/image2.jpg" alt="Image 2" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 2</h3>
              <p>Image 2 Image 2</p>
            </div>
          </div>

          <div class="item">
            <img src="./resources/images/image3.jpg" alt="Image 3" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 3</h3>
              <p>Image 3 Image 3</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="carousel-inner">

          <div class="item active">
            <img src="./resources/images/image4.jpg" alt="Image 4" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 4</h3>
              <p>Image 4 Image 4</p>
            </div>
          </div>

          <div class="item">
            <img src="./resources/images/image5.jpg" alt="Image 5" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 5</h3>
              <p>Image 5 Image 5</p>
            </div>
          </div>

          <div class="item">
            <img src="./resources/images/image6.jpg" alt="Image 6" style="width:640px; height:280px;">
            <div class="carousel-caption">
              <h3>Image 6</h3>
              <p>Image 6 Image 6</p>
            </div>
          </div>

        </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

以上代码每张幻灯片(第一列)仅显示 1 张图片，第二列为空白区域。

预期输出:

我需要两列和两张图片。当我点击 Next Control 时，将出现接下来的两个图像。当我点击上一个控件时，将出现前两个图像。 (所有这些都是由 HTML 和 CSS 单独完成的，而不是 JS 或其他。)

希望大家明白!

Answer 1

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div>

      <div class="col-sm-6">
        <div class="carousel-inner">
          <div class="item active">
          <div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 1</h3>
              <p>Image 1 Image 1</p>
            </div>
          </div>

          <div class="item">
<div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 2</h3>
              <p>Image 2 Image 2</p>
            </div>
          </div>

          <div class="item">
           <div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 3</h3>
              <p>Image 3 Image 3</p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="carousel-inner">

          <div class="item active">
          <div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 4</h3>
              <p>Image 4 Image 4</p>
            </div>
          </div>

          <div class="item">
           <div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 5</h3>
              <p>Image 5 Image 5</p>
            </div>
          </div>

          <div class="item">
           <div class="col-sm-6">
          <img src="./resources/images/image1.jpg"  >
          </div>
          <div class="col-sm-6">
<img src="./resources/images/image1.jpg"  >
          </div> 
            <div class="carousel-caption">
              <h3>Image 6</h3>
              <p>Image 6 Image 6</p>
            </div>
          </div>

        </div>
      </div>
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

你可以这样做