javascript - 幻灯片效果不工作

Question

我创建了一个带有无限滑动选项的轮播。如果用户从最后一个项目向左滑动，第一个项目将出现，如果从第一个项目向右滑动，最后一个项目将出现。滑动效果适用于每个滑动事件，但滑动效果在从最后一项滑动到第一项以及从第一项滑动到最后一项时不起作用。这是我的代码-

categorizedCarousel = Ext.create('Ext.Carousel', {
        title: record.data.name,
        layout: {
            type: 'vbox',
            pack: 'center'
        },
        listeners: {
            element: 'element',
            swipe: function(e) {
                if (e.direction == 'right') {

                    if (this.getActiveIndex() === 0) {
                        this.animateActiveItem(this.getMaxItemIndex(), {type: 'slide', direction: 'right'});
                    }
                } else {

                    if (this.getActiveIndex() === this.getMaxItemIndex()) {
                        this.animateActiveItem(0, {type: 'slide', direction: 'left'});
                    }
                }
            }
        }
    });

上面的“{type: 'slide', direction: 'right/left'}”虽然不起作用。我试图找到这个解决方案很长时间，超过 2 周，但仍然没有解决方案。有任何溶解 enzyme 吗？

Answer 1

我假设您在 dom 中实际上没有按正确顺序排列的图像，无法显示此幻灯片动画。例如:

<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>

如果你想从 img 4 滑动到 img1，你首先必须在 dom 中的 img 4 之后放置 img 1，这样它们就可以很好地并排放置 - 你可以通过继续移动每个项目来做到这一点周围或只是在开始和结束时克隆第一个和最后一个项目，一旦动画完成，跳回到实际项目:

在刀槽花纹从 4 到 1 之前:

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li active>img 4</li>
<li>img 1 copy</li>

动画时:

<li>img 4 clone</li>
<li>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>
<li active>img 1 copy</li>

动画完成后(跳转到实际的 img 1)

<li>img 4 clone</li>
<li active>img 1</li>
<li>img 2</li>
<li>img 3</li>
<li>img 4</li>
<li>img 1 copy</li>