JS Slick Slider:可变宽度图像

时间:2015-09-08 18:44:25

标签: jquery css slick.js

我想为固定高度但宽度可变的图像实现滑块。为此,我想使用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,但我想避免为此编写自己的代码。

编辑:

我更改了标记,因此它不再使用ulli,只使用a标记。这让我摆脱了很多CSS,现在一切似乎都起作用了。但旋转木马只会循环前两个项目,然后等待,直到最后一个项目是唯一可见的项目,然后突然将剩余的项目放回容器并循环它们。

0 个答案:

没有答案