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变量，并且可能需要围绕字幕进行测试。

Answer 2

如果我理解正确，您希望以常规方式使用PhotoSwipe，特别是像往常一样传递items数组（即第一张幻灯片位于索引0），但拥有图库将此幻灯片0放置在“最右侧”位置，然后在其左侧滑动1等，并让左上方的计数器显示幻灯片“index”（偏移1以避免显示“ 0“）因此（因此仅使用options.index: 3是不够的。）

如果这是正确的，你想要@e_i_pi想象的2 ^nd布局：

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

因此你需要3件事：

撤消您的items阵列。
从最右边的幻灯片开始。
修改UI计数器，以便报告的幻灯片索引“反转”。

通过调整PhotoSwipe脚本中的代码，您无需执行这3项操作。您可以使用执行这些操作的“包装器”功能，并且仍然可以使用未经修改的PhotoSwipe代码（以便以后更容易升级，并从库中的未来改进中受益）。

<强> 1。撤消您的items数组：

正如您所知，这是最简单的操作：items = items.reverse()

<强> 2。从最右边的幻灯片开始：

正如@e_i_pi所提议的那样，您只需要传递一个index option，该index = items.length - 1 shown等于您的“第一张”幻灯片的新索引（即反转后）：0

最初是在索引items，在逆转之后它现在是“最后”项目。

第3。反转UI计数器：

稍稍高级，但没有太复杂。

作为PhotoSwipe作者的https://plnkr.co/edit/kPeFeZbwhqHzbz8A9VRK?p=preview，可以轻松自定义UI计数器，但需要首先初始化图库。因此，“包装器”功能需要在内部初始化库。

然后构建新UI计数器内容的逻辑不是太复杂。您只需要获取项目总数并减去******** Slide4 < Slide3 < Slide2 < *Slide1* ******** 0 1 2 3 <= index in items JS array 4 3 2 1 <= "index" to be shown in UI counter JS数组中的当前索引：

var total = gallery.options.getNumItemsFn();
var current = gallery.getCurrentIndex();
var reversed = total - current;
var separator = gallery.options.indexIndicatorSep;
indexIndicatorDOMElement.innerHTML = reversed + separator + total;

所以你可能有类似的东西：

// Wrapper initialize function that does the RTL conversion automatically.
// Note: it will also automatically initialize the PhotoSwipe, because it needs to be initialized for UI counter to be modified.
function photoSwipeRTL(pswpElement, uiClass, items, options) {
  // 1. Reverse the items.
  items = items.reverse();

  // 2. Override the start index.
  var itemsIndexMax = items.length - 1;
  var index = options.index || 0; // If not provided, use 0.
  // Now reverse the start index.
  options.index = itemsIndexMax - index;

  // Now instantiate a PhotoSwipe and initialize it, so that we can modify its UI counter.
  var pswp = new PhotoSwipe(pswpElement, uiClass, items, options);
  pswp.init();

  // Get the counter element provided in options, or get it from DOM.
  var indexIndicatorDOMElement = options.indexIndicatorDOMElement || document.querySelectorAll('.pswp__counter')[0];

  // 3. Modify the UI counter.
  pswp.ui.updateIndexIndicator = function() {
    // This code reverses the current index compared to the total number of items in the gallery.
    var total = pswp.options.getNumItemsFn();
    var current = pswp.getCurrentIndex();
    var reversed = total - current;
    var separator = pswp.options.indexIndicatorSep;
    indexIndicatorDOMElement.innerHTML = reversed + separator + total;
  };
  // force index update
  pswp.ui.updateIndexIndicator();

  return pswp;
}

把所有东西放在一起，你有一个包装函数可以放在自己的JS文件中，这样你就可以在任何你想要的地方使用它。

new

你可以非常简单地使用它，几乎就像标准的PhotoSwipe一样，除了你只是执行工厂（不需要// INITIALIZE var pswpElement = document.querySelectorAll('.pswp')[0]; // build items array var items = [slide1, slide2, slide3, slide4]; // define options (if needed) var options = { indexIndicatorSep: ' of ', indexIndicatorDOMElement: document.querySelectorAll('.pswp__counter')[0] }; // Initializes and opens PhotoSwipe var gallery = photoSwipeRTL(pswpElement, PhotoSwipeUI_Default, items, options);关键字），并且不需要初始化库，因为它已经在内部完成

count

现场演示：nunique

在滑块插件上实现RTL

2 个答案: