javascript - 为什么我的猫头鹰轮播项目是垂直排列而不是水平排列的？

我想问一下，我的猫头鹰传送带有问题。
我想用猫头鹰转盘制作一个中心拖动滑块，当我编写代码时，项目是垂直而不是水平的。怎么了？我还包括一个
Codepen
猫头鹰传送带不是像圆滑的传送带一样自动吗？如果您知道，请帮助我。我需要您的帮助，因为这是我第一次使用猫头鹰传送带
HTML

<div class="slider-news">
  <div class="item">
    <div class="card secondary-card">
       <div class="card-img-top">
          <div class="d-flex" id="tags">
             <div class="tags yellow">Article</div>
             <div class="tags yellow">IT Services</div>
          </div>
       </div>
       <div class="card-body">
          <div class="title">
             <h2>
                3 Tantangan Umum ketika Melakukan IT Outsourcing
             </h2>
          </div>
        </div>
      </div>
    </div>
  <div class="item">
    <div class="card secondary-card">
       <div class="card-img-top">
          <div class="d-flex" id="tags">
             <div class="tags yellow">Article</div>
             <div class="tags yellow">IT Services</div>
          </div>
       </div>
       <div class="card-body">
          <div class="title">
             <h2>
                3 Tantangan Umum ketika Melakukan IT Outsourcing
             </h2>
          </div>
        </div>
      </div>
    </div>
  <div class="item">
    <div class="card secondary-card">
       <div class="card-img-top">
          <div class="d-flex" id="tags">
             <div class="tags yellow">Article</div>
             <div class="tags yellow">IT Services</div>
          </div>
       </div>
       <div class="card-body">
          <div class="title">
             <h2>
                3 Tantangan Umum ketika Melakukan IT Outsourcing
             </h2>
          </div>
        </div>
      </div>
    </div>
  <div class="item">
    <div class="card secondary-card">
       <div class="card-img-top">
          <div class="d-flex" id="tags">
             <div class="tags yellow">Article</div>
             <div class="tags yellow">IT Services</div>
          </div>
       </div>
       <div class="card-body">
          <div class="title">
             <h2>
                3 Tantangan Umum ketika Melakukan IT Outsourcing
             </h2>
          </div>
        </div>
      </div>
    </div>
  <div class="item">
    <div class="card secondary-card">
       <div class="card-img-top">
          <div class="d-flex" id="tags">
             <div class="tags yellow">Article</div>
             <div class="tags yellow">IT Services</div>
          </div>
       </div>
       <div class="card-body">
          <div class="title">
             <h2>
                3 Tantangan Umum ketika Melakukan IT Outsourcing
             </h2>
          </div>
        </div>
      </div>
    </div>
</div>

SCSS

.card{
    border: none;
    border-radius: 20px;
&.secondary-card{
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 13px 26px rgba(0,0,0,0.07);

        .card-img-top{
            height: 250px;
            position: relative;
          background-color:#c1c1c1;

            #tags{
                position: absolute;
                top: 20px;
                left: 20px;

                .tags{
                    &:nth-child(1){
                        margin-right: 10px;
                    }
                }
            }
        }

        .card-body{
            padding: 40px 30px;

            .title{
                h2{
                    position: relative;
                    font-size: 20px;
                    line-height: 27px;

                    &::before{
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: -10px;
                        height:4px;
                        width:23px;
                        background-color: red;
                    }
                }
            }
        }
    }
}

.tags{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 8px;
    color: #fff;
    font-size: 13px;

    &.yellow{
        background-color: yellow;
    }

}

JS

$(document).ready(function() {
            $('.slider-news').owlCarousel({
                center: true,
                items: 4,
                loop: false,
                margin: 10,
                nav:false,
                dots:false,
                // responsive: {
                //     600: {
                //         items: 4
                //     }
                // }
            });
        });

最佳答案

您好，而不是使用.slider-news类，请尝试在标记和javascript上使用owl-carousel。我认为它在库上有一些默认样式。我以前在这个库上工作，并且使用过owl carousel。如果您想要自定义样式，则可以在owl carousel上使用辅助类。
这是我编辑的codepen上的链接。