Как изменить стрелочки fancybox?

Question

[Yura0103]

Не получается изменить стрелочки в fancybox. Делаю так

$(document).ready(function() {
const container = document.getElementById("myProject");
const options = {
  Carousel: {
    Navigation: {
      prevTpl:
        '<button tabindex="0" title="Назад" class="f-button is-prev" data-carousel-prev="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg></button>' +
        "</button>",
      nextTpl:
        '<button tabindex="0" title="Далее" class="f-button is-next" data-carousel-next="true">' +
        ' <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg></button>' +
        "</button>",
    },
  },

};

new Carousel(container, options);
	});

Стрелки не меняются . Подскажите что делаю не так?

Answer 1

[Андрей]

$(document).ready(function () {
  Fancybox.bind("[data-fancybox]", {
    Carousel: {
      Navigation: {
        prevTpl:
          '<button tabindex="0" title="Назад" class="f-button is-prev" data-carousel-prev="true">' +
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg>' +
          "</button>",
        nextTpl:
          '<button tabindex="0" title="Далее" class="f-button is-next" data-carousel-next="true">' +
          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg>' +
          "</button>",
      },
    },
  });
});

Answer 2

[Elaryks]

Согласно документации, Carousel в options не нужен:

const container = document.getElementById('myProject');
const options = {
    Navigation: {
        prevTpl: '',
        nextTpl: '',
    },
};

new Carousel(container, options);

Если добавлять button, то она добавляется внутрь button плагина (получаются две вложенных кнопки, что не рекомендуется делать), поэтому я бы оставил просто svg. Кроме того, обратите внимание на viewBox="0 0 4 4" у левой кнопки и на лишний </ button> в обоих случаях.

То есть итоговый код примерно такой:

$(document).ready(function() {
    const container = document.getElementById("myProject");
    const options = {
        Navigation: {
            prevTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M15 3l-9 9 9 9"></path></svg>'
            nextTpl: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M9 3l9 9-9 9"></path></svg>',
        },
    };

    new Carousel(container, options);
});