Question

我将从可视化开始：

Slider visualization!

所以关键是我希望有一个滑块，可以在每张幻灯片周围加载不同的图像。

例如：

在可点击的滑块图像1,2,3,4,5,6周围滑动1负载。幻灯片2与图片7,8,9,10,11,12相同。等...

这是否可能？

我想要两个滑块一起工作，但我不知道从哪里开始这样的东西以及如何制作一个像这样的风格（绿色物品）。

Answer 1

我找到了使用2个或更多同步滑块的解决方案，可以使用bxslider轻松完成并在其github论坛中运行：

$(function(){
      var slider1 = $('.bxslider2').bxSlider({
        auto: false,
        mode: 'fade',
        pager: false,
        preloadImages: 'visible'
      });
      var slider2 = $('.bxslider').bxSlider({
        auto: true,
        mode: 'fade',
        preloadImages: 'visible',
        onSlideBefore: function($slideElement, oldIndex, newIndex){
          slider1.goToSlide(newIndex);
        }
      });
    });

中间的大滑块将是regalr滑块，那些小滑块可以与大滑块同步。

如果你想同步更多，那么只需从slider1复制，重命名并添加sliderX.goToSlide(newIndex);

可以在自身周围加载图像的滑块

1 个答案: