微件:Swiper
更多操作
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <style> .pvzhe-swiper{width:100%;height:auto;position:relative;margin:0 auto;user-select:none}.pvzhe-swiper .swiper-wrapper{height:auto}.pvzhe-swiper .swiper-slide{display:flex;align-items:center;justify-content:center}.pvzhe-swiper .swiper-slide img{width:100%;height:auto;display:block;object-fit:cover}.pvzhe-swiper .swiper-button-prev,.pvzhe-swiper .swiper-button-next{color:#fff;z-index:10;cursor:pointer;pointer-events:auto}.pvzhe-swiper .swiper-pagination-bullet-active{background:#fff}.pvzhe-swiper .swiper-pagination{padding-top:10px} </style> <script> RLQ.push(['jquery', function() {
// 🔑 用 requestAnimationFrame 确保在下一渲染帧执行(浏览器标准做法)
requestAnimationFrame(function() {
$('.pvzhe-swiper').each(function(i, el) {
if ($(el).data('swiper-init')) return;
var opts = {};
try {
opts = JSON.parse($(this).attr('data-swiper-options') || '{}');
// 🔑 关键:将选择器转换为当前容器内的元素
if (opts.pagination?.el && typeof opts.pagination.el === 'string') {
opts.pagination.el = $(el).find(opts.pagination.el)[0];
}
if (opts.navigation?.prevEl && typeof opts.navigation.prevEl === 'string') {
opts.navigation.prevEl = $(el).find(opts.navigation.prevEl)[0];
}
if (opts.navigation?.nextEl && typeof opts.navigation.nextEl === 'string') {
opts.navigation.nextEl = $(el).find(opts.navigation.nextEl)[0];
}
} catch (e) { return; }
try {
var swiper = new Swiper($.extend({ el: el }, opts));
$(el).data('swiper-init', true);
mw.pvzhe = mw.pvzhe || {};
(mw.pvzhe.swipers = mw.pvzhe.swipers || []).push(swiper);
} catch (e) {}
});
});
}]); </script>