Html 如何让引导转盘一次循环所有卡3？

我的网页上有一个引导转盘，但转盘一次只能显示一张卡。我需要它一次显示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>

{项目%中的项目为%}
{{project.title}
{{project.description|slice:：100}
{%endfor%}

它在浏览器中的外观：

---

您可以使用猫头鹰传送带传送卡。您可以插入卡片（HTML）并根据JS文件中的要求配置需要显示的项目的编号。owl转盘响应迅速，并且与各种浏览器兼容

jsfiddle的链接如下所示。

HTML

添加以下CSS

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

如果您需要有关owl转盘文档的任何进一步帮助，请参阅以下文档

---

您可以使用该代码。。。我已经有一个正常运转的旋转木马了。必须有一种方法来实现我已有的代码，但只需将其更改为显示3张卡，而不是仅显示一张卡。这是我正在寻找的解决方案，而不是一种书写整个旋转木马的全新方式。

 $(".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
    },
    
  },
  });

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