Bxslider - 当方向为 RTL 时改变幻灯片的方向

Question

我希望 BxSlider 的插件能够在页面方向更改为 RTL 时工作。

body {
    direction: rtl;
}

在此处查看示例：http://jsfiddle.net/6pL77/

Answer 1

.bx-wrapper .bx-viewport{ direction: ltr; }

Answer 2

只需添加

direction:ltr;

到 jquery.bxslider.css 中的 .bx-wrapper

它会解决你的问题

Answer 3

首先在 jquery.bxslider.css 中添加以下内容

.bx-wrapper{
    direction: rtl;
}

然后在 jquery.bxslider.js 中添加以下内容

var defaults = {
direction: "rtl",
.
.
.

然后找到

var setPositionProperty = 函数（值、类型、持续时间、参数）

在 jquery.bxslider.js 中并在 setPositionProperty 函数中添加以下代码

if (slider.settings.direction == "rtl") {
                value = value * (-1);
            }

仅此而已..

Answer 4

我发现 Deepchand 的回答很有帮助。除了这些变化之外，我还发现滑块在触摸屏上的行为异常，在初次触摸时会自发地交换第一张和最后一张幻灯片。要解决此问题，您需要进行以下更改以支持触摸屏上的 RTL。可能有一种方法可以使用更多全局变量来改进一些代码，但这应该会让你朝着正确的方向前进：

//AFTER var defaults AND BEFORE  $.fn.bxSlider = function(options){
  //If RTL, add direction setting
  var RTL = $('html').attr('dir');
  if(RTL=='rtl'){
    defaults.direction = "rtl";
  }

//=======================================
//CHANGE IN: var setup (I had to - you may not need to)
el.css({
  width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 200) + '%' : 'auto',
  position: 'relative'
});//215 changed to 200 for RTL support - seems to work fine for default LTR as well


=======================================

//ADD INTO: var onTouchStart = function(e){ AFTER var orig = e.originalEvent;

  //IF Touch RTL
  if (slider.settings.direction == "rtl") {
    
    var theLi = el.find('li');//Get widths
    theLiWidth = theLi.width();
    theLiLength = theLi.not('.bx-clone').length;//get number of items in carousel NOT .bx-clone

    //Do calcs to get correct positions for first and last NOT.bx-clone slides
    //If on touch start current is first OR last that are NOT.bx-clone >>>
        // Determine which is current slide >>> which has active class    
    //Pass new calulated position into slider.touch.originalPos.left 
    //Otherwise default (LTR) uses:slider.touch.originalPos = el.position();  
    var activeIndex = el.find('li.active-slide').index();
    if(activeIndex==1){//If slide active is first slide position is -width
      slider.touch.originalPos.left = -(theLiWidth);
    } else if(activeIndex == theLiLength) {//Else, if active slide is last slide position is -width*length
      slider.touch.originalPos.left = -(theLiWidth*theLiLength);
    }

  }
  //End touch RTL 


//========================================

//CHANGE IN:  var onTouchMove = function(e){


      if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
        var value = 0;
        // if horizontal, drag along x axis
        if(slider.settings.mode == 'horizontal'){
          var change = orig.changedTouches[0].pageX - slider.touch.start.x;         
          if (slider.settings.direction == "rtl") {
            value = slider.touch.originalPos.left - change;
          } else {
            value = slider.touch.originalPos.left + change;
          }
    


//========================================

//CHANGE IN:  var onTouchMove = function(e){

      if(slider.settings.mode == 'fade'){
        var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
        if(distance <= slider.settings.swipeThreshold){
          if (slider.settings.direction == "rtl") {
            slider.touch.start.x > slider.touch.end.x ? el.goToPrevSlide() : el.goToNextSlide();
          } else {
            slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();  
          }
          el.stopAuto();
        }

//AND: 

          if(Math.abs(distance) >= slider.settings.swipeThreshold){

            if (slider.settings.direction == "rtl") {
              distance > 0 ?  el.goToNextSlide() : el.goToPrevSlide();
            } else {
              distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
            }