Question

我想通过bxslider插件制作一个滑块，该插件内嵌多个不同宽度的图像，并使它们连续移动。我能够通过将幻灯片宽度覆盖为“自动”来使其工作。唯一的问题是，我只能为“速度”参数设置一个固定值，例如4000，因此所有幻灯片都需要4000毫秒才能离开视口。这会导致：滑块的实际速度因实际滑块的宽度而异。在较薄的情况下，滑块“似乎”较慢，在较宽的情况下则更快。这是我的示例：

Cell: ({ row }) => <a href={row.original.ticketurl}>{row.original.ticketId}</a>

$('.bxslider').bxSlider({
  'mode': 'horizontal',
  'controls': false,
  'pager': false,
  'auto': true,
  'infiniteLoop': true,
  'speed': 4000,
  'pause': 0,
  'easing': 'linear',
  'preloadImages': 'visible',
  'minSlides': 3,
  'maxSlides': 70
});

.container {
  width: 1240px;
  max-width: 100%;
  margin: auto;
}

.bx-wrapper .bx-viewport {
  box-shadow: none;
  border: none;
  left: 0;
}

.bxslider {
  width: 100%;
}

.slide {
  width: auto!important;
  margin-right: 20px;
}

img {
  width: 100%;
}

你们有想让速度保持恒定的想法吗？

我的第一个想法是只制作一张幻灯片，然后将所有图像放在一起（浮动：左；）。在这种情况下，我必须将幻灯片宽度设置为内部所有图像宽度的总和。如果有很多图像，则它比视口更宽。是否可以只运行一张特大的幻灯片？

我希望我的解释是可以理解的。

预先感谢， Imre

使用bxslider无限连续循环各种宽度的幻灯片

0 个答案: