jssor 并根据响应显示图像

Question

我有一个 jssor 滑块，它使用两个图像，一个用于桌面，另一个用于移动。桌面图像使用 bootstrap hidden-xs class 所以它隐藏在移动设备上

问题是 jssor 使用了第一个 图像，用于桌面的图像在移动设备上看起来很糟糕（高度太短）

我希望 jssor 尊重 hidden-xs 所以它需要第二张图片

这是因为桌面和移动图像使用不同的高度

<div id="jssor1">
   <div data-u="slides">
      <div>
         <img data-u="image" src="image1" class="hidden-xs" />
         <img data-u="image" src="image2" class="hidden-sm hidden-md hidden-lg" />
      </div>

      /* more divs */

   </div>
</div>

Answer 1

请删除 data-u="image"，手动设置大小和位置。

然后您可以在桌面上显示 image1，在移动设备上显示 image2。

使用$ScaleSize缩放滑块，因此您可以在移动和桌面上将滑块缩放到不同的大小

jssor 并根据响应显示图像

jssor and display image acording responsiveness

twitter-bootstrap

twitter-bootstrap-3

jssor