如何制作徽标css滑块？

Question

我尝试使用猫头鹰旋转木马制作徽标滑块。但旋转木马没有出现。

我希望我的旋转木马看起来像这样：

我的HTML是：

    <div class="owl-carousel">
      <div class="item"><img src="resources/img/c-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/h-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/a-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/am_logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/le-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/pan-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/i-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/b-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/s-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/so-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/ep-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/d-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/br-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/ap-logo.png" alt="Owl Image"></div>
      <div class="item"><img src="resources/img/in-logo.png" alt="Owl Image"></div>
    </div>

我的css是：

.owl-carousel .item{
    margin: 3px;
}

.owl-carousel .item img{
    display: block;
    width: 100%;
    height: auto;
}

在我的html中我包含了脚本：

<script>


$(document).ready(function() {

  $(".owl-carousel").owlCarousel({

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});


</script>

我包括：

<script src="vendors/js/owl.carousel.js"></script> 
<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>

如何显示滑块？或者是否有更简单的方法来实现这种滑块外观？

Answer 1

在包含JQuery之后，您需要包含owl carousel文件：

<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css">
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<script src="vendors/js/owl.carousel.js"></script>