在移动视图中将元素组合成轮播？

Question

Here 是我希望将它们组合成可滑动轮播的元素。有没有办法做到这一点？我只希望它们只在移动视图中变成轮播。

这里是 HTML 如果需要的话。感谢您的帮助。

<div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    <div class="col launch">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon1.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">First 7 Days Free</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      
      </div>
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon2.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Fully Support</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
        
      </div>
  </div>
  <div class="col star">
      <div class="row-sm-3 row-md-4 fx">
        <div class="row d-flex justify-content-center resim"><img src="css/img/Icon3.png" alt=""></div>
        <div class="row d-flex justify-content-center baslik">Modern Flat Design</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      </div>
      <div class="row-sm-3 row-md-4 fx" >
        <div class="row d-flex justify-content-center resim" ><img src="css/img/Icon4.png" alt="" id="ozel"></div>
        <div class="row d-flex justify-content-center baslik">User Friendly</div>
        <div class="row d-flex justify-content-center yazi">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</div>
      </div>
  </div>


  </div>

Answer 1

我想唯一的机会是同时为您的 grid-like 显示（如上所示）和您的旋转木马编写代码，如下所示：

<!-- Code of your grid view -->
<div id="gridView">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2" data-ride="carousel">
  ...
</div>

接下来使用 Bootstrap display property 正确显示和隐藏容器，例如，d-md-none 在 md 和更宽的屏幕上隐藏，d-none d-md-block 在小于 md 的屏幕上隐藏：

<!-- Code of your grid view -->
<div id="gridView" class="d-none d-md-block">
  <div class="col-md-5 col-xs-12 d-flex justify-content-center little">
    ...
  </div>
</div>
<!-- Code of your carousel -->
<div id="carouselExampleControls" class="carousel slide mx-3 my-2 d-md-none" data-ride="carousel">
  ...
</div>

因为你用的是d-flex，所以我把额外的<div id="gridView">放在它的周围。

这是一个example of a Bootstrap carousel with captions:

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

您可以在那里轻松集成您的容器，并将其与上述方法相结合。

祝你好运！

在移动视图中将元素组合成轮播？

Combine elements into a carousel in mobile view?

html

css

slider

carousel

bootstrap-4