0

我正在为一个网站做一个垂直的代码。我正在使用 bx 滑块。

一切就绪 - 我需要将 autoDirection 设置为“prev”，并且还需要设置tickerHover 选项。使用 autoDirection 会在我的代码中带来不必要的速度变化。当我将鼠标悬停时，它工作得很好——自动收报机暂停。

但是当鼠标悬停在股票行情之外时，股票行情有时滚动得非常快或有时很慢。

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

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

谁能指出我如何正确设置。

4

1 回答 1

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>

于 2017-05-24T15:18:19.690 回答