如何让我的 Bootstrap 轮播一次循环浏览所有卡片 3？

Question

我的网页上有一个 Bootstrap 轮播，但轮播一次只能显示一张卡片。我需要它一次显示 3 张卡片。此外，由于某种原因，箭头也无法正确显示。我也尝试使用替代图标。我可以找到它们并用鼠标单击它们，但在视觉上它们不显示。我对这个问题的主要关注是卡片显示。对箭头的任何额外见解都将是一个奖励。

我的轮播代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1">
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
                <span class="sr-only">Previous</span>
            </a>
        </div>
        <div class="col-sm-10">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for project in projects %}
                <div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
                    <div class="col-md-3 d-flex">
                        <div class="shadow card mb-2">
                            <img class="card-img-top" src="{% static project.image %}">
                            <div class="card-body">
                                <h5 class="card-title">{{ project.title }}</h5>
                                <p class="card-text">{{ project.description | slice:":100"}}...</p>
                            </div>
                            <div class="card-body">
                                <a href="{% url 'project_detail' project.pk %}"
                                    class="btn btn-primary">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="col-sm-1">
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

它在浏览器中的样子：

Answer 1

您可以将猫头鹰轮播用于您的卡片。您可以插入您的卡片（HTML）并在JS文件中根据您的要求配置您需要显示的项目的数量。 owl carousel 响应迅速，并且兼容各种浏览器。

JS fiddle 的链接如下。 https://jsfiddle.net/hilalrehan/2x5jrewp/25/

HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link href ="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">


 <div class="container ">
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel ">
                    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

                      <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
                                       <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>      
                                        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div> 
                      
                        
                    </div>
                </div>
            </div>
        </div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
 <div class="container ">
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel ">
                    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

                      <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
                                       <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>      
                                        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div> 
                      
                        
                    </div>
                </div>
            </div>
        </div>

您可以使用 ma​​rgin 和 items 来根据您的要求配置显示。在此示例中，一项显示在 0px 到 768px 分辨率的范围内。您可以根据需要更改显示的项目数。

JS

 $(".owl-carousel").owlCarousel({
    responsiveClass: true,
    dots: true,
    dotsContainer: false,
       loop: true,
       autoWidth: true,
      autoplay:true,
      nav:true,
      smartSpeed:1000,
      items:3,
      responsive: {
    0: {
      items:1,
      margin: 150,
      center: true
    
    },
    
    768: {
        items:3,
              margin:200,
         center: false
            },   
    
    992: {
        items:3,
    margin: 35,
        center: true
    },
    
    1200: {
          items:3,
        margin:250,
         center: true
    },
    
  },
  });

添加以下 CSS

.owl-nav {
    text-align: center;
        }

如果您需要有关 owl carousel 文档的更多帮助，请参阅以下文档。

https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html