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

Question

我想问一下，我的猫头鹰旋转木马有问题。

我想用猫头鹰轮播制作一个中心拖动滑块，当我制作代码时，项目是垂直的而不是水平的。怎么了？我还包括一个 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
                //     }
                // }
            });
        });

Answer 1

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

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