2013-06-18 57 views
0

我正在为一个网站垂直行情。我正在使用bx滑块。jQuery bxSlider autoDirection'prev'问题

它的所有设置 - 我需要将autoDirection设置为'prev',我还需要设置tickerHover选项。使用autoDirection会在我的自动收报器中带来不必要的速度变化。当我徘徊我的鼠标时,它工作得相当好 - 股票停止。

但是当鼠标悬停在自动收报机之外时,自动收报机有时会非常快速地滚动或有时非常缓慢。

$('#carousel').bxSlider({ 
    useCSS: false, 
    mode:"vertical", 
    ticker: true, 
    speed: 6000, 
    tickerHover:true, 
    autoDirection:"prev" 
}); 

这里是小提琴: - http://jsfiddle.net/devilived/z9QdV/2/

任何人都可以点我怎么可以树立正确的。

+0

为什么会出现PHP的标签? –

+0

@LightStyle很抱歉,我删除了php标签。 –

回答

0

我面临同样的问题,并解决了使用一些CSS3技巧。我希望它能为你工作。

$('.bxslider').bxSlider({ 
 
useCSS: false, 
 
    mode:"vertical", 
 
    ticker: true, 
 
    speed: 10000, 
 
    tickerHover:true 
 
});
.bx-wrapper .bx-viewport { 
 
    -moz-box-shadow: 0 0 5px #ccc; 
 
    -webkit-box-shadow: 0 0 5px #ccc; 
 
    box-shadow: 0 0 5px #ccc; 
 
    border: solid #fff 5px; 
 
    left: -5px; 
 
    background: #fff; 
 
} 
 

 
    .bxsliderWrapper { 
 
    transform: rotate(180deg);  
 
    } 
 
    
 
    .bxsliderWrapper li { 
 
     transform: rotate(180deg); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://bxslider.com/lib/jquery.bxslider.css"> 
 
<div class="bxsliderWrapper"> 
 
<ul class="bxslider"> 
 
    <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li> 
 
    <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li> 
 
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li> 
 
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li> 
 
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li> 
 
    <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li> 
 
</ul> 
 
</div>