AEM轮播组件Glide.js断点条件逻辑不生效求助

核心问题 #

你的代码已导入Glide的Breakpoints模块，但未将其添加到挂载的modules列表中，Glide的断点功能依赖该模块才能生效，这是575px断点逻辑无效果的直接原因。同时可优化perView的取值判断，避免NaN值干扰逻辑。

修复后的代码 #

import AEM from 'base/js/aem';
import Glide, { Controls, Breakpoints, Autoplay, Keyboard, Swipe } from '@glidejs/glide/dist/glide.modular.esm';

class Carousel extends AEM.Component {
    init() {
        this.initCarousel();
    }
    initCarousel() {
        const el = this.element;
        const props = this.props;

        const pauseButton = this.element.querySelector('.pause-button');
        let perView = parseInt(props.cmpPerView, 10);
        // 提前处理perView为NaN的情况，默认设为1
        perView = Number.isNaN(perView) ? 1 : perView;
        let cmpDelay = parseInt(props.cmpDelay, 10);
        let autoPlay = true;
        if (this.props.cmpAutoplay === 'false' ||
            this.props.carouselAutoplay === 'false' ||
            perView < 1 ||
            window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            autoPlay = false;
        }
        
        // 关键修改：添加Breakpoints到modules，启用断点功能
        this.modules = {
            Controls: Controls,
            Breakpoints: Breakpoints,
            Autoplay: Autoplay,
            Keyboard: Keyboard,
            Swipe: Swipe
        };

        // 优化断点逻辑：确保perView有效时才设置断点
        this.breakpoints = {};
        if (perView > 1) {
            this.breakpoints = {
                575: {
                    perView: 1,
                    peek: 100
                }
            };
        }

        this.options = {
            type: props.cmpType,
            perView: perView,
            autoplay: autoPlay ? cmpDelay : false,
            peek: 0,
            breakpoints: this.breakpoints,
            keyboard: true,
            animationDuration: 400,
            rewind: true
        };

        const glide = new Glide(el, this.options);
        if (pauseButton && autoPlay) {
            const pauseClasses = pauseButton.classList;
            glide.on('play', () => {
                pauseClasses.add('fa-pause');
                pauseClasses.remove('fa-play');
            });
            glide.on('pause', () => {
                pauseClasses.add('fa-play');
                pauseClasses.remove('fa-pause');
            });
            pauseButton.addEventListener('click', btn => {
                if (pauseClasses.contains('fa-play')) {
                    glide.play();
                } else {
                    glide.pause();
                }
            });
        } else if (pauseButton) {
            pauseButton.remove();
        }

        if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) {
            this.element.querySelectorAll('.glide__slide').forEach(e => {
                if (!e.classList.contains('glide__slide--active')) {
                    e.classList.add('visually-hidden');
                }
            });
            window.CQ = window.CQ || {};
            window.CQ.CoreComponents = window.CQ.CoreComponents || {};
            window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel('cqauthor', window);
            window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage('cmp.panelcontainer', message => {
                if (message.data && message.data.type === 'cmp-carousel' && message.data.id === el.dataset.cmpPanelcontainerId) {
                    if (message.data.operation === 'navigate') {
                        let index = message.data.index;
                        if (index < 0) {
                            return;
                        }

                        this.element.querySelectorAll('.glide__slide').forEach((el, i) => {
                            if (i === index) {
                                el.classList.add('glide__slide--active');
                                el.classList.remove('visually-hidden');
                            } else {
                                el.classList.remove('glide__slide--active');
                                el.classList.add('visually-hidden');
                            }
                        });
                    }
                }
            });
        } else {
            glide.mount(this.modules);
        }
    }
}

export { Carousel };

额外说明 #

• Glide的断点值代表视口最大宽度，设置575意味着浏览器宽度≤575px时，会应用该断点下的perView和peek配置，完全匹配你的需求。
• 提前处理perView的NaN情况，避免后续逻辑判断出现异常。

内容的提问来源于stack exchange，提问作者Hondo Comacho