幻灯片中间没有出现猫头鹰轮播点答案

【问题标题】：owl-carousel dots not appearing in the middle of the slides幻灯片中间没有出现猫头鹰轮播点
【发布时间】：2020-09-01 15:37:42
【问题描述】：

我正在创建一个网站并尝试使用 owl-carousel 来展示我的每一项技能。我正在尝试在幻灯片末尾显示点。但是，似乎只出现了导航箭头。我可以拖动项目，但点不出现。

任何帮助将不胜感激。

Javascript：

$(".owl-carousel").owlCarousel({
  loop: true,
  nav: true,
  items: 1,
  autoplay: true,
  autoplayTimeout: 2000,
  autoplayHoverPause: true,
  dots: true,
  responsive:{
    0:{
      items:1
    },
    480:{
      items:2
    },
    768:{
      items:3
    },
    938:{
      items:4
    }  
  }
});

enter image description here

导航箭头显示，但点不显示。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您是否包含 Owl Carousel 的主题文件。看起来默认 css 只有基本样式。主题 css 是包含点等元素样式的主题：

$(".owl-carousel").owlCarousel({
  loop: true,
  nav: true,
  items: 1,
  autoplay: true,
  autoplayTimeout: 2000,
  autoplayHoverPause: true,
  dots: true,
  responsive:{
    0:{
      items:1,
    },
    480:{
      items:2,
    },
    768:{
      items:3,
    },
    938:{
      items:4,
    }  
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

【讨论】：

是的，事实上我没有主题文件。非常感谢

【解决方案2】：

将center: true 放入这个$(".owl-carousel").owlCarousel({}) 初始化程序中。希望它会工作

【讨论】：

感谢您的帮助。我将其添加到函数中，但是每个元素都没有居中。

【解决方案3】：

我不确定您使用的是哪个版本的 Owl Carousel，这可能决定了用于控制 init 函数中的点的参数。但是您可以在页面上的 HTML 中搜索 class="owl-dots"，这是通常赋予此容器的类。检查css是否设置为display: none;。如果是，那么您可能没有指定正确的代码来显示将删除此类的点。所以你可以找到文档在你的 init 函数中设置它，或者只是设置一个 .owl-dots {display: block !important;} 的 CSS 规则。您可能还需要这个来使按钮水平排列：.owl-dots .owl-dot { display: inline-block;}

【讨论】：