已解决：使用JS在Smart Slider 3切换幻灯片时调整元素尺寸

我在用WordPress搭建个人网站，用Smart Slider 3插件做主图，目前是本地环境没法分享链接。第二张幻灯片里的某个元素在窗口调整前位置偏移、尺寸错误，找到插件官方的手动触发重调教程，里面给了这段代码：

_N2.r('#n2-ss-10', function(){
    _N2['#n2-ss-10'].responsive.doResize();
});

但插件开发者说不提供编码帮助。我作为JS新手，改了代码适配自己的滑块ID，用Code Snippets加到页面头部和主体都没用：

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector('.n2-bullet.n2-style-1b63db3aa0abdb8edd4ab4e9709ae8df-dot.n2-active').addEventListener('click', function(){
    _N2['#n2-ss-2'].responsive.doResize();
    });
});

控制台报错：

?code-snippets-js-snippets=head&ver=4:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at HTMLDocument. (?code-snippets-js-snippets=head&ver=4:1:149)

想问两个问题：

1. 我的代码哪里错了？
2. 除了点击子弹，还能拖拽图片切换幻灯片，怎么实现不管用哪种方式切换，都能调用重调函数保证元素定位正确？

1. 代码报错的原因及修正 #

你遇到的Cannot read properties of null报错，核心原因有两个：

• 类名带随机串不可靠：.n2-style-1b63db3aa0abdb8edd4ab4e9709ae8df-dot是插件动态生成的随机标识，页面刷新后会变化，用它定位元素肯定找不到。
• DOM加载时机不对：DOMContentLoaded触发时，Smart Slider可能还没完成动态渲染，目标子弹元素还没生成，自然返回null。

修正后的代码，应该用Smart Slider官方提供的_N2.r方法等待滑块加载完成，再给所有子弹绑定点击事件：

_N2.r('#n2-ss-2', function(slider) {
    // 给所有幻灯片子弹添加点击事件
    document.querySelectorAll('.n2-bullets .n2-bullet').forEach(bullet => {
        bullet.addEventListener('click', function() {
            slider.responsive.doResize();
        });
    });
});

_N2.r会等待指定ID的滑块元素加载完成后再执行回调，确保slider对象和子弹元素都存在。

2. 兼容所有切换方式的解决方案 #

要覆盖点击子弹、拖拽切换等所有场景，最好的方式是监听幻灯片切换的状态变化，只要幻灯片切换完成就触发重调。这里提供两种可靠的实现方式：

方式一：监听过渡动画结束事件 #

幻灯片切换时会触发过渡动画，动画结束后执行重调：

_N2.r('#n2-ss-2', function(slider) {
    const sliderContainer = document.querySelector('#n2-ss-2');
    // 监听过渡结束事件
    sliderContainer.addEventListener('transitionend', function(e) {
        // 确保是幻灯片相关的过渡
        if (e.target.classList.contains('n2-slide')) {
            slider.responsive.doResize();
        }
    });
});

方式二：监听幻灯片/子弹的激活状态变化 #

用MutationObserver监听子弹或幻灯片的n2-active类变化，一旦状态切换就触发重调：

_N2.r('#n2-ss-2', function(slider) {
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 检测到active类变化时触发重调
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                const target = mutation.target;
                if (target.classList.contains('n2-active')) {
                    slider.responsive.doResize();
                }
            }
        });
    });

    // 监听所有子弹的类变化
    document.querySelectorAll('.n2-bullets .n2-bullet').forEach(bullet => {
        observer.observe(bullet, { attributes: true });
    });

    // 同时监听所有幻灯片的类变化（覆盖拖拽切换场景）
    document.querySelectorAll('#n2-ss-2 .n2-slide').forEach(slide => {
        observer.observe(slide, { attributes: true });
    });
});

这两种方式都能覆盖所有幻灯片切换场景，确保每次切换后元素都能正确重调位置和尺寸。

内容的提问来源于stack exchange，提问作者José Guedes