Owl-Carousel2 - набор точекДанных - PullRequest
Новая
       17

Owl-Carousel2 - набор точекДанных

0 голосов
/ 16 ноября 2018

Мне нужно установить пользовательские точки в сове карусели. У меня есть этот код в 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
      }
    }
  });
});

Но с этим кодом ничего не происходит, отображаются только неопределенные точки. Можно ли вообще сделать такие точки?

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Итак, взглянув на документацию , опция dotsData принимает логическое значение, которое просто говорит Owl Carousel искать атрибут data-dot для каждого элемента, для которого показана точка. Таким образом, ваша пользовательская разметка должна входить в HTML, а не передаваться в виде строки при настройке карусели в JS.

Если вы отметите эту скрипту, вы увидите, как опция 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 за ответ. Я надеюсь, что это помогает:)

0 голосов
/ 16 ноября 2018

Измените следующий код следующим образом: 

$(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
      }
    }
  });
});

Добавьте данные о точках в сове: 

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