Jquery 循环滑块轮播

Question

我在使用 jquery 循环轮播垂直滑动 4 个可见项目时遇到问题

我已将滑块放入 Jsfiddle 进行测试

 $('#list_post').cycle({ 
    timeout:    1000,
    fx:      'carousel',
    slides: '> div',
    speed: 500
  });     
<div id="list_post" class='list-box' data-cycle-carousel-vertical="true" 
data-cycle-carousel-fluid="true" data-cycle-carousel-visible="4">
   <div class="slides"></div>
   <div class="slides"></div>
   <div class="slides"></div>
   <div class="slides"></div>
</div>

滑块调整为较小宽度并仅显示幻灯片中的一项。如何使滑块中的 4 个项目可见？

Answer 1

如果您希望所有四个项目都可见，您可以通过将属性

fx

更改为

fade

来采用替代方式。

 $('#list_post').cycle({ 
 timeout:    1000,
 fx:      'fade',
 slides: '> div',
 speed: 500
 });  

演示

Answer 2

也许有人想解决它。

如果你想要基于轮播结构的jQuery Cycle，你可以使用Cycle2。

示例：

<div class="slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=0
    data-cycle-next="#next4"
    data-cycle-prev="#prev4"
    data-cycle-pager="#pager4"
    data-cycle-carousel-visible=5
    data-allow-wrap=false
    >
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    ...
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>

<div class=center>
    <a href=# id=prev4><< Prev </a>
    <a href=# id=next4> Next >> </a>
</div>

<div class="cycle-pager" id=pager4></div>