Alpine.JS 轮播的上一个箭头不起作用

Question

我已经在 Magento2（Hyva 主题）中添加了这个自定义轮播，但是左箭头根本不起作用。

右边的（下一个）工作正常且流畅，但点击左箭头（上一个）旋转木马不会向后移动。

这是 HTML（用 PHP 呈现）

<div x-data="subcategoriesCarousel()" x-init="init()"
>
    <?php if ($options['enabled']): ?>
        <?php if (!empty($categories)): ?>
            <?php if ($heading): ?>
                <h3 class="apptrian-subcategories-heading"><?= /* @noEscape */ $heading ?></h3>
            <?php endif; ?>
            <ul  x-ref="container" class="apptrian-subcategories-<?= /* @noEscape */ strtolower($options['layout']) ?> scroll-snap-x no-scrollbar"><?php
                foreach ($categories as $c): ?><li class="apptrian-subcategories-category-wrapper"><?php

// Above line with opening <ul> tag and below line with closing </ul> tag
// must be written like this so there are no spaces between <li> tags.

                    $info        = '';
                    $image       = $c['image'];
                    $name        = $c['name'];
                    $description = $c['description'];
                    $url         = $c['url'];

                    if ($singleLink) {
                        $info .= '<a class="apptrian-subcategories-category" href="' . $url . '">';

                        foreach ($elements as $el) {
                            switch ($el) {
                                case 'image':
                                    $info .= '<div class="apptrian-subcategories-category-image"><img src="' . $image
                                        . '" loading="lazy" alt="' . $name . '"' . $imageAttributes . '/></div>';
                                    break;
                                case 'name':
                                    if ($name) {
                                        $info .= '<div class="apptrian-subcategories-category-name"><span>' . $name . '</span></div>';
                                    }
                                    break;
                                case 'description':
                                    if ($description) {
                                        // If description attribute
                                        if ($options['description'] == 'description') {
                                            $info .= '<div class="apptrian-subcategories-category-description">' . $description . '</div>';
                                            // If meta_description attribute
                                        } else {
                                            $info .= '<div class="apptrian-subcategories-category-description"><span>' . $description
                                                . '</span></div>';
                                        }
                                    }
                                    break;
                                default:
                                    break;
                            }
                        }

                        $info .= '</a>';
                    } else {
                        $info .= '<div class="apptrian-subcategories-category">';

                        foreach ($elements as $el) {
                            switch ($el) {
                                case 'image':
                                    $info .= '<div class="apptrian-subcategories-category-image"><a href="' . $url . '"><img src="'
                                        . $image . '" loading="lazy" alt="' . $name . '"' . $imageAttributes . '/></a></div>';
                                    break;
                                case 'name':
                                    if ($name) {
                                        $info .= '<div class="apptrian-subcategories-category-name"><a href="' . $url . '"><span>'
                                            . $name . '</span></a></div>';
                                    }
                                    break;
                                case 'description':
                                    if ($description) {
                                        // If description attribute
                                        if ($options['description'] == 'description') {
                                            $info .= '<div class="apptrian-subcategories-category-description">' . $description . '</div>';
                                            // If meta_description attribute
                                        } else {
                                            $info .= '<div class="apptrian-subcategories-category-description"><span>' . $description
                                                . '</span></div>';
                                        }
                                    }
                                    break;
                                default:
                                    break;
                            }
                        }

                        $info .= '</div>';
                    }

                    /* @noEscape */ echo $info; ?></li><?php
                endforeach; ?></ul>

        <?php endif; ?>
    <?php endif; ?>
    <div class="arrows">
        <div @click="scrollTo(prev)">
            <div><</div>
        </div>
        <div @click="scrollTo(next)">
            <div>></div>
        </div>
    </div>
</div>

这是紧随其后的 Alpine.JS 脚本

<script>
    function subcategoriesCarousel()
    {
        return {
            container: null,
            prev: null,
            next: null,
            init() {
                this.container = this.$refs.container

                this.update();

                this.container.addEventListener('scroll', this.update.bind(this), {passive: true});
            },
            update() {
                const rect = this.container.getBoundingClientRect();

                const visibleElements = Array.from(this.container.children).filter((child) => {
                    const childRect = child.getBoundingClientRect()

                    return childRect.left >= rect.left && childRect.right <= rect.right;
                });

                if (visibleElements.length > 0) {
                    this.prev = this.getPrevElement(visibleElements);
                    this.next = this.getNextElement(visibleElements);
                }
            },
            getPrevElement(list) {
                const sibling = list[0].previousElementSibling;

                if (sibling instanceof HTMLElement) {
                    return sibling;
                }

                return null;
            },
            getNextElement(list) {
                const sibling = list[list.length - 1].nextElementSibling;

                if (sibling instanceof HTMLElement) {
                    return sibling;
                }

                return null;
            },
            scrollTo(element) {
                const current = this.container;

                const nextScrollPosition =
                    element.offsetLeft +
                    element.getBoundingClientRect().width / 2 -
                    current.getBoundingClientRect().width / 2;

                current.scroll({
                    left: nextScrollPosition,
                    right: nextScrollPosition,
                    behavior: 'smooth',
                });
            }
        };
    }
</script>