为什么我的 owl 轮播项目是垂直排序而不是水平排序？

Question

我想问一下，我的 owl 轮播有问题。

我想用 owl 旋转木马制作一个中心拖动滑块，当我制作代码时，项目是垂直的而不是水平的。怎么了？我还包括一个 Codepen

owl 轮播是否不像光滑的轮播那样自动？如果你知道，请帮助我。我需要你的帮助，因为这是我第一次使用 owl 轮播

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
                //     }
                // }
            });
        });

Answer 1

您好，不要使用 class .slider-news，请尝试在您的标记中使用 owl-carousel 和 javascript。我认为它在库中有一些默认样式。我以前在这个库上工作过，我用过 owl carousel。如果您想要自定义样式，您可以在 owl 轮播上使用辅助 class。

这是我编辑的 codepen 上的 link。

为什么我的 owl 轮播项目是垂直排序而不是水平排序？

why my owl carousel items are sorted vertical not horizontal?

javascript

html

sass

owl-carousel

owl-carousel-2