почему мои элементы карусели совы сортируются вертикально, а не горизонтально?

Я хочу спросить, у меня проблема с моей каруселью совы.

Я хочу сделать ползунок с перетаскиванием по центру с помощью карусели совы, когда я сделал код, элементы вертикальны, а не горизонтальны. что не так? Я также включил 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
                //     }
                // }
            });
        });