时间戳

首页 > 解决方案 > 在移动视图中将元素组合成轮播？

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

问题描述

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

如果需要，这里是 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>

标签： htmlcssbootstrap-4slidercarousel

解决方案

我想唯一的机会是为您的网格状显示（如上所示）和您的轮播设置代码，如下所示：

<!-- 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>

接下来使用Bootstrapdisplay属性正确显示和隐藏容器，例如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">的东西。

这是带有标题的 Bootstrap 轮播示例：

<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>

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

祝你好运！

推荐阅读