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

如何解决为什么我的猫头鹰轮播项目是垂直排列而不是水平排列？

我想问，我的猫头鹰传送带有问题。

我想用猫头鹰轮播制作一个中心拖动滑块，编写代码后，项目是垂直而不是水平的。怎么了？我还包括一个 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.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。如果您想要自定义样式，则可以在猫头鹰轮播上使用辅助类。

这是我编辑的codepen上的链接。