jQuery bxSlider autoDirection'上一步'问题

Question

I am working on a vertical ticker for a website. i am using bx slider.

Its all set - i need the autoDirection to be set as 'prev' and i need the tickerHover option to be set as well. Using autoDirection brings unwanted speed changes in my ticker. when ever i hover my mouse, it works quite well - the ticker pauses.

But when the mouse is hovered out of the ticker, the ticker sometimes scrolls very quickly or sometimes very slowly.

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

here is the fiddle: - http://jsfiddle.net/devilived/z9QdV/2/

Can anyone point me to how i can set up right.

Answer 1

I'm facing the same issue and solved using some CSS3 tricks. I hope it will work for you.

 $('.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>