如何控制Bxslider中滑塊的垂直方向？

Question

我在我的網頁上使用了BxSlider這是一個jquery插件。我將滑動模式設置爲「垂直」，但默認滑動方向是從下往上移動，但我想將其更改爲從上往下移動。但我想不出它out.Any建議將不勝感激

Answer 1

對於這一點，你必須改變這種plugin

的core code在插件

var setSlidePosition = function(){ 
    // if last slide, not infinite loop, and number of children is larger than specified maxSlides 
    if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){ 
     if (slider.settings.mode == 'horizontal'){ 
      // get the last child's position 
      var lastChild = slider.children.last(); 
      var position = lastChild.position(); 
      // set the left position 
      setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.width())), 'reset', 0); 
     }else if(slider.settings.mode == 'vertical'){ 
      // get the last showing index's position 
      var lastShowingIndex = slider.children.length - slider.settings.minSlides; 
      var position = slider.children.eq(lastShowingIndex).position(); 
      // set the top position 
      setPositionProperty(-position.top, 'reset', 0);//Change this line 
     } 
    // if not last slide 
    }else{ 
     // get the position of the first showing slide 
     var position = slider.children.eq(slider.active.index * getMoveBy()).position(); 
     // check for last slide 
     if (slider.active.index == getPagerQty() - 1) slider.active.last = true; 
     // set the repective position 
     if (position != undefined){ 
      if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0); 
      else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0); 
     } 
    } 
} 

更改行：

setPositionProperty(-position.top, 'reset', 0); 

要

setPositionProperty(position.top, 'reset', 0); 

然後嘗試

Answer 2

您可以設置使用定位滑塊箭頭的位置。例如，我們將滑塊「箭頭」的位置設置爲絕對，上箭頭，下箭頭。

Answer 3

您可以設置車展滑動的方向轉變(autoDirection: 'prev')

$('.bxslider').bxSlider({ 
    mode: 'vertical', 
    slideMargin:20, 
    minSlides: 4, 
    maxSlides: 4, 
    moveSlides: 1, 
    auto: true, 
    autoDirection: 'prev' /* <- */ 
});