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

У меня возникают проблемы с изменением стрелочек в fancybox. Я использую следующий код: 
<pre><code class="javascript">$(document).ready(function() {
const container = document.getElementById("myProject");
const options = {
  Carousel: {
    Navigation: {
      prevTpl:
        '&lt;button tabindex="0" title="Назад" class="f-button is-prev" data-carousel-prev="true"&gt;' +
        ' &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" tabindex="-1"&gt;&lt;path d="M15 3l-9 9 9 9"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;' +
        "&lt;/button&gt;",
      nextTpl:
        '&lt;button tabindex="0" title="Далее" class="f-button is-next" data-carousel-next="true"&gt;' +
        ' &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"&gt;&lt;path d="M9 3l9 9-9 9"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;' +
        "&lt;/button&gt;",
    },
  },
};

new Carousel(container, options);
	});</code></pre> 
Стрелки не изменяются. Можете подсказать, в чём может быть проблема?
  • 17 ноября 2024 г. 22:03
Ответы на вопрос 2 
Проблема, с которой вы столкнулись, может быть связана с тем, что вы настраиваете стрелки для карусели, а не для Fancybox. Имейте в виду, что Fancybox и карусель (например, `Carousel` от другой библиотеки) могут использовать разные механизмы для управления навигацией.

Если вы хотите изменить стрелки (навигацию) в Fancybox, возможно это делается с помощью его собственных параметров. Например, в Fancybox 3 используется следующий способ для настройки кнопок:

1. Убедитесь, что вы используете правильную версию Fancybox и что у вас включены необходимые скрипты и стили.

2. Для изменения стрелок в Fancybox 3 вы можете использовать опцию `btnTpl`. Вот пример, как это сделать:

```javascript
$(document).ready(function() {
  fancybox = $.fancybox;

  fancybox.defaults.btnTpl = {
    close: '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Закрыть">' +
             '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
             '<path d="M12 10.586l4.293-4.293 1.414 1.414L13.414 12l4.293 4.293-1.414 1.414L12 13.414l-4.293 4.293-1.414-1.414L10.586 12 6.293 7.707l1.414-1.414z"/>' +
             '</svg>' +
           '</button>',
    arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="Назад">' +
               '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
               '<path d="M15.414 7l-1.414 1.414L18.586 12l-4.586 4.586L15.414 20l6-6-6-6z"/>' +
               '</svg>' +
               '</button>',
    arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="Вперед">' +
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
                '<path d="M8.586 7L7.172 8.414 11.586 12 7.172 15.586 8.586 17l6-6-6-6z"/>' +
                '</svg>' +
                '</button>'
  };

  // Инициализируем Fancybox
  $('[data-fancybox]').fancybox({
    // Ваши опции Fancybox
  });
});
```

3. Подставьте свои SVG-коды в параметры `close`, `arrowLeft`, `arrowRight` и настройте стили по своему усмотрению.

Если вы используете другой плагин или библиотеку, например, Carousel, убедитесь, что вы используете правильные параметры и методы, соотносящиеся с этой библиотекой.

Если проблема сохраняется, убедитесь, что ваши SVG-коды правильные и отображаются корректно, а также проверьте, что другие стили не мешают отображению стрелок.
$(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>",
      },
    },
  });
});
Похожие вопросы
    Показать ещё