javascript - 在 slider 插件上实现 RTL

Question

在 several 之后requests ignored由开发人员支持 RTL，我正在尝试自己做。

反转数组顺序非常简单:

self.items = !!(_options.rtl) ? _items = items.reverse() : _items = items; // Reverse the array for RTL

.. 然而，另一个挑战是滑动 RTL。因此，从幻灯片 4(第一张幻灯片)向右滑动应该会滑到下一张幻灯片(幻灯片 3)。

我相信所有的魔法都发生在这个函数中，但我不太清楚要调整什么:

_moveMainScroll = function(x, dragging) {

    if(!_options.loop && dragging) {

        if (_options.rtl) {
            console.log('RTL enabled');
            console.log('_currentItemIndex: ', _currentItemIndex);
            console.log('_slideSize.x: ', _slideSize.x);
            console.log('_currPositionIndex: ', _currPositionIndex);
            console.log('x: ', x);
            var newSlideIndexOffset = _currentItemIndex + (_slideSize.x * _currPositionIndex - x) / _slideSize.x,
                delta = Math.round(x - _mainScrollPos.x);
            console.log(newSlideIndexOffset, delta);
        }
        else {
            var newSlideIndexOffset = _currentItemIndex + (_slideSize.x * _currPositionIndex - x) / _slideSize.x,
            delta = Math.round(x - _mainScrollPos.x);
            console.log(newSlideIndexOffset, delta);
        }

        if( (newSlideIndexOffset < 0 && delta > 0) || (newSlideIndexOffset >= _getNumItems() - 1 && delta < 0) ) {
                x = _mainScrollPos.x + delta * _options.mainScrollEndFriction;
        } 
    }

    _mainScrollPos.x = x;
    _setTranslateX(x, _containerStyle);
}

到目前为止，这是我的代码:https://jsfiddle.net/tdx3p1p3/

Answer 1

以前从未使用过该库，所以我在这里可能有点天真。您的 rtl 选项似乎只颠倒了元素的顺序，否则没有任何效果。查看代码，我看不出这会是个问题，但我没有调查开发人员在您链接到的那篇文章中提到的标题问题。

---

如果我错了，请原谅我，但我认为这就是您想要的:

                            ********
 Slide1 < Slide2 < Slide3 < *Slide4*
                            ********

如果是这种情况，您希望顺序相同，但初始元素为幻灯片 4(即索引 3):

var options = {
    ...
    rtl: false,
    index: 3
};

如果是这种情况，那么我认为您甚至不需要 _options.rtl 变量。

---

另一方面，如果您想要这种布局:

                            ********
 Slide4 < Slide3 < Slide2 < *Slide1*
                            ********

...那么你可以使用这个配置:

var options = {
    ...
    rtl: true,
    index: 3
};

...这当然需要 _options.rtl 变量，并且可能需要围绕字幕进行测试。