时间戳

首页 > 解决方案 > Owl-Carousel2 - 设置点数据

javascript - Owl-Carousel2 - 设置点数据

问题描述

我需要在猫头鹰轮播中设置自定义点。我在 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
      }
    }
  });
});

但是这段代码什么也没发生，只是显示了未定义的点。甚至可以制作这样的自定义点吗？

标签： javascriptjqueryowl-carouselowl-carousel-2

解决方案

像这样更改以下代码：

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

推荐阅读