Owl-Carousel2 - 设置点数据

Question

我需要在 owl 轮播中设置自定义点。我在 JS 中有这段代码：

$(document).ready(function() {
  $('#header-slider').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 2300,
    pagination: false,
    navigation: true,
    navText: [$('.am-next'), $('.am-prev')],
    navigation: true,
    margin: 0,
    dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1,
        nav: false
      },
      1200: {
        items: 1,
        nav: false
      }
    }
  });
});

但是这段代码没有任何反应，只是显示了未定义的点。甚至可以制作这样的自定义点吗？

Answer 1

将下面的代码改成这样：

$(document).ready(function() {
  $('#header-slider').owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 2300,
    pagination: false,
    navigation: true,
    navText: [$('.am-next'), $('.am-prev')],
    navigation: true,
    margin: 0,
    dotData: true,
    dotsData: true
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1,
        nav: false
      },
      1200: {
        items: 1,
        nav: false
      }
    }
  });
});

在您的 owl-item 中添加您的点数据：

  <div class="item" data-dot="<button role='button' class='owl-dot'></button>">
     <!-- Your Image -->
  </div>

Answer 2

所以看看 the documentation，dotsData 选项采用一个布尔值，它只是告诉 Owl Carousel 为每个显示点的项目寻找 data-dot 属性。因此，在 JS 中配置轮播时，您的自定义标记需要进入 HTML 而不是作为字符串传入。

如果你检查这个 Fiddle 你可以看到 JS 选项如何与 HTML 数据属性相关：https://jsfiddle.net/4xymnwey/

HTML

<ul class="owl-carousel owl-theme">
  <li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
  <li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
  <li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>

JS

$(".owl-carousel").owlCarousel({
  items: 1,
  dots: true,
  dotsData: true
});

将答案归功于 GitHub 上的 this issue comment。希望对您有所帮助:)

Answer 3

如果对您没有帮助。尝试手动实现。这是示例：-

HTML 由 Owl-轮播自动生成

<div class="owl-controls">
    <div class="owl-pagination">
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page active"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
        <div class="owl-page"><span class=""></span></div>
    </div>
</div>

它将由 Owl 轮播自动生成。 select 父级 id/class 并使用 javascript 或 jquery 更改内容。这完全取决于你。这是示例：-

Javascript

 var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
        let i=1;
        dots.forEach((elem)=>{
            elem.innerHTML = i;
            i++;
})

Owl-Carousel2 - 设置点数据

Owl-Carousel2 - set dotsData

javascript

jquery

owl-carousel

owl-carousel-2