Question

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

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 = function（value，type，duration，params）

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

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

全部......

Answer 4

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

＆＃13;

//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();
            }

＆＃13;

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

4 个答案: