投稿内有多个gallery时同样适用,图片有标题的时候显示图片标题。
const singleGalllery = () => {
let $order = 1;
$(".wp-block-gallery").each(function () {
let $gallery_name = "gallerySwiper_" + $order;
var $this = $(this);
let swiper_slide = "";
let gallery = [];
$this.after(
'<div class="swiper gallerySwiper ' + $gallery_name + '"><div class="swiper-wrapper"></div><div class="custom_pagination"><div class="swiper-button-prev"></div><div class="swiper-pagination"></div><div class="swiper-button-next"></div></div></div>'
);
$this.find("img").each(function () {
if ($(this).data("src")) {
gallery.push([
$(this).data("src"),
$(this).siblings(".wp-element-caption").text(),
]);
} else {
gallery.push([
$(this).attr("src"),
$(this).siblings(".wp-element-caption").text(),
]);
}
});
if (gallery.length > 0) {
for (const img in gallery) {
let $caption = "";
if (gallery[img][1]) {
$caption = '<div class="caption">' + gallery[img][1] + "</div>";
}
swiper_slide +=
'<div class="swiper-slide">' +
$caption +
'<img src="' +
gallery[img][0] +
'" alt=""></div>';
}
$this
.next(".gallerySwiper")
.find(".swiper-wrapper")
.append(swiper_slide);
//gallery swiper
var swiper = new Swiper('.'+$gallery_name, {
grabCursor: true,
autoHeight: true,
watchSlidesProgress: true,
loop: true,
slidesPerView: 1,
spaceBetween: 10,
autoplay: {
delay: 3500,
disableOnInteraction: false,
},
breakpoints: {
1001: {
spaceBetween: 20,
slidesPerView: 1.4,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
},
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
if (index < 9) {
index = "0" + (index + 1);
} else {
index = index + 1;
}
return '<span class="' + className + '">' + index + "</span>";
},
},
});
}
$this.remove();
$order++;
});
};