我想为固定高度但宽度可变的图像实现滑块。为此,我想使用slick slider。
在示例中,它显示了可变宽度项目的演示,但是每个元素都内联指定了项目宽度。尝试使用我的图像执行此操作时,滑块仅加载前两个项目以循环,然后显示一个大的空白区域。手动导航时也会出现奇怪的故障。
我的标记结构[已编辑以反映更改]:
.logo-slider
a.slider-next
.slider-inner
a // repeats for each element
img
a.slider-prev
我的JS / CoffeeScript代码:[还有更新的选择器]
$('.logo-slider').each (_idx, elem) ->
slickElem = $(elem).find('> .slider-inner')
slickElem.slick(
infinite: true,
speed: 300,
variableWidth: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
pauseOnHover: true,
slide: 'a'
)
$(elem).find('> .slider-next').on 'click', () ->
slickElem.slick('slickNext')
return
$(elem).find('> .slider-prev').on 'click', () ->
slickElem.slick('slickPrev')
return
return
如果您碰巧知道这样做的库,请随时提出建议:我没有设置Slick,但我想避免为此编写自己的代码。
编辑:
我更改了标记,因此它不再使用ul
和li
,只使用a
标记。这让我摆脱了很多CSS,现在一切似乎都起作用了。但旋转木马只会循环前两个项目,然后等待,直到最后一个项目是唯一可见的项目,然后突然将剩余的项目放回容器并循环它们。