Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/79.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/logging/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 如何制作徽标css滑块?_Jquery_Html_Css_Slider_Carousel - Fatal编程技术网

Jquery 如何制作徽标css滑块?

Jquery 如何制作徽标css滑块?,jquery,html,css,slider,carousel,Jquery,Html,Css,Slider,Carousel,我试图用猫头鹰旋转木马制作一个标志滑块。但是旋转木马没有出现 我希望我的旋转木马看起来像这样: 我的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/i

我试图用猫头鹰旋转木马制作一个标志滑块。但是旋转木马没有出现

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

我的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>
在我的html中,我包含了以下脚本:

<script>


$(document).ready(function() {

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

      autoPlay: 3000, //Set AutoPlay to 3 seconds

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

  });

});


</script>

$(文档).ready(函数(){
$(“.owl carousel”).owl carousel({
自动播放:3000,//将自动播放设置为3秒
项目:4,
itemsDesktop:[1199,3],
itemsDesktopSmall:[979,3]
});
});
我包括:

<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>


如何使滑块显示?或者有没有更简单的方法来实现此滑块外观?

在包含JQuery之后,需要包含owl旋转木马文件,如下所示:

<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> 

在包含JQuery之后,需要包含owl转盘文件,如下所示:

<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>