使用 lightGallery 并希望在每个图像上实现一个带有前/后滑块的内联画廊。 两者都可以独立使用它们:BeerSlider 和 lightGallery.
有人让这个工作吗? 我尝试了几种方法都没有成功。 我的尝试之一是将 BeerSlider 类添加为标题并将它们附加到 lg-item 元素:
// photo before after
const beforeAfterContainer = document.getElementById("before-after");
const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
container: beforeAfterContainer,
dynamic: true,
appendSubHtmlTo: ".lg-inner",
dynamicEl: [
{
src: "https://loremflickr.com/640/480?random=1",
thumb: "https://loremflickr.com/320/240?random=1",
subHtml: `<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
<img src="https://loremflickr.com/640/480?random=1" />
<div class="beer-reveal" data-beer-label="after">
<img src="https://loremflickr.com/640/480?random=2" />
</div>
</div>`,
}
//....
],
});
beforeAfterInlineGallery.openGallery();
$("#beer-slider").each(function (index, el) {
$(el).BeerSlider({ start: $(el).data("beer-start") });
});
那根本不起作用。此外,我尝试使用 lightGallery 选择器让 Beer Slider 显示图像被 lightGallery 忽略。但这根本不起作用,因为一个实例会破坏其他实例(据我正确理解这些脚本)。
有什么想法可以让两者一起工作吗? 我真的不需要使用 BeerSlider - 如果有人在使用 lightGallery 之前/之后有任何其他插件,我可以切换到它。
谢谢大家!
好的,开始工作了。我使用了动态内联画廊。但它也可以与其他 lightGallery 系列一起使用。 这甚至适用于图片标签。
HTML
<div class="container-flex">
<div class="beerSlider" id="before-after"></div>
</div>
JS
const beforeAfterContainer = document.getElementById("before-after");
const beforeAfterInlineGallery = lightGallery(beforeAfterContainer, {
container: beforeAfterContainer,
dynamic: true,
appendSubHtmlTo: ".lg-item",
enableSwipe: false,
enableDrag: false,
// ... other options
dynamicEl: [
{
src: "https://loremflickr.com/640/480?random=1",
sources: generatePictureSources("welcome-carousel", "misc"), // your picture set(s)
thumb: "https://loremflickr.com/320/240?random=1",
subHtml: `<div id="photo-before-after" class="container-flex beerSlider-test">
<div id="beer-slider" class="beer-slider" data-beer-label="before" data-beer-start="50">
<picture class="lgAccept">
<source
// ..... your picture sources
/>
<img src="https://loremflickr.com/640/480?random=1" alt="image" loading="lazy" />
</picture>
<div class="beer-reveal" data-beer-label="after">
<picture>
<source
// ..... your reveal sources
/>
<img src="https://loremflickr.com/640/480?random=2" alt="image presenting video work" loading="lazy" />
</picture>
</div>
</div>
</div>`,
},
],
});
beforeAfterInlineGallery.openGallery();
$.fn.BeerSlider = function (options) {
options = options || {};
return this.each(function () {
new BeerSlider(this, options);
});
};
$(".beer-slider").each(function (index, el) {
$(el).BeerSlider({ start: $(el).data("beer-start") });
});
CSS
.beerSlider {
.lg-img-wrap {
display: none;
}
.lg-sub-html {
padding: 0;
color: var(--clr-font-dark);
bottom: 0;
right: 0;
left: 0;
top: 0;
}
}