javascript - 使用数据属性初始化的fancybox向fancybox添加箭头以响应

Question

我使用了非常酷的 Fancybox 3，唯一让我的客户感到困扰的是，在响应版本的盒子中没有视觉指示，您可以滑动以转到下一张图片。

现在我在 fancybox doc 页面上看到，您可以通过这种方式后加载和添加内容：

afterLoad : function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    }

但我不使用通过javascript初始化的fancybox，而是直接通过html属性。我怎样才能确保在fancybox中添加一些东西？

Answer 1

例如，您可以编辑默认设置：

$.fancybox.defaults.afterLoad = function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    };
};

Answer 2

我以这种方式解决了它，我对fancybox的CSS文件进行了一些更改，以在响应时显示控件：

@media (max-width: 800px){

.fancybox-button--left, .fancybox-button--right, .fancybox-buttons button:not(.fancybox-button--close) {
    display: inline-block!important;
}