2016-08-30 127 views
0

我试图让jquery插件unslider工作,在每次点击下一个/上一个按钮时,下一对隐藏的幻灯片移动到视图中。Unslider多个幻灯片,每次点击

例如,如果页面加载时只有三张幻灯片在视图中,那么每次点击下一个箭头时,接下来的三张幻灯片就会进入视图。

我目前已经在unslider工作,只有一张幻灯片在视图中,一张幻灯片移动到每次点击查看。

想知道是否有人用这个插件在过去完成了这种行为,并且愿意协助?

在此先感谢

JS

$('.photo-slider').unslider({ 
    infinite: true, 
    nav: false 
}); 

HTML

<div class="photo-slider"> 
       <ul> 

        <li> 
         Hello1 
        </li> 
        <li> 
         Hello2 
        </li> 
        <li> 
         Hello3 
        </li> 
        <li> 
         Hello4 
        </li> 
        <li> 
         Hello5 
        </li> 
        <li> 
         Hello6 
        </li> 
        <li> 
         Hello7 
        </li> 
        <li> 
         Hello8 
        </li> 
        <li> 
         Hello9 
        </li> 
        <li> 
         Hello10 
        </li> 
        <li> 
         Hello11 
        </li> 
        <li> 
         Hello12 
        </li> 
        <li> 
         Hello13 
        </li> 
        <li> 
         Hello14 
        </li> 
        <li> 
         Hello15 
        </li> 
       </ul> 

回答

1

更好地改变了看法,并添加3图像或文字在一个礼,是这样的:

<div class="photo-slider"> 
      <ul> 

       <li> 
        <div>Hello1</div> 
        <div>Hello2</div> 
        <div>Hello3</div> 
       </li> 
       <li> 
        <div>Hello4</div> 
        <div>Hello5</div> 
        <div>Hello6</div> 
       </li> 
      </ul> 
+1

谢谢Piotr,这可能适用于静态碎石大小,但流体设计呢? – AnchovyLegend

+0

使用弹性内容https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

+0

我也有同样的要求,每次点击时都会显示多张幻灯片,就像bxSlider和slickslide一样。有没有我们可以使用unslider配置选项来实现的选项?我的要求是在移动设备上每次点击一张幻灯片,并在桌面上每次点击3次。这是可能的吗?我将无法按照您的建议更改模板。 – webdevexp