jQuery bxSlider autoDirection 'prev' issue

jQuery bxSlider autoDirection 'prev' issue

本文关键字：issue prev bxSlider autoDirection jQuery      更新时间：2023-09-26

我正在为一个网站的垂直报价器工作。我用的是bx滑块。

它的所有设置-我需要自动方向被设置为"prev"，我需要的tickerHover选项被设置为好。使用autoDirection会在我的计时器上带来不必要的速度变化。当我把鼠标悬停时，它工作得很好——报时器会暂停。

但是当鼠标悬停在计时器外时，计时器有时滚动得很快，有时很慢。

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

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

谁能告诉我怎样才能设置好呢

我面临同样的问题，并使用一些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>

相关文章：