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
 });

Demo

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>

Jquery Cycle Slider Carousel

2 个答案: