CODEWITHSUNDEEP
jquerycssright-to-leftbxslider
kach
kach

Reputation: 809

Bxslider - change the direction of slides when direction is RTL

I want that the plugin of BxSlider is able to work when the page direction is changed to RTL.

body {
    direction: rtl;
}

See the example here : http://jsfiddle.net/6pL77/

Upvotes: 1

Views: 7395

Answers (4)

Grazlewacky
Grazlewacky

Reputation: 1

I found Deepchand's answer very helpful. As well well as those changes I found the slider misbehaved on touch screens, spontaneuosly swapping first and last slides upon the initial touch. To deal with this you need to make the following changes to support RTL on touchscreens. There is probably a way of refining some of the code with more global vars, but this should get you in the right direction:

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

Upvotes: 0

Deepchand yadav
Deepchand yadav

Reputation: 1

first of all add the following in jquery.bxslider.css

.bx-wrapper{
    direction: rtl;
}

then add the following in jquery.bxslider.js

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

then find

var setPositionProperty = function (value, type, duration, params)

in jquery.bxslider.js and add the following code in setPositionProperty function

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

that's all..

Upvotes: 0

nouredine
nouredine

Reputation: 111

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

Upvotes: 11

Zeroic
Zeroic

Reputation: 251

just add 

direction:ltr;

to .bx-wrapper in jquery.bxslider.css

and it will fix your problem

Upvotes: 2

Related Questions