Question

我尝试创建光滑版本的移动版本（它应在移动设备上显示不同的图像）。

是否可以通过任何简单的方法来实现，而无需添加第二次非常相似的代码（更改image src），或者我应该构建下一个div滑块并在移动版本上隐藏/显示。

Answer 1

您可以使用简单的媒体查询来管理它，例如向每张幻灯片添加两个图像，并使用CSS媒体查询显示正确的图像。

下面的示例代码。

HTML

<div class='my-slide'>
  <div class='item'>
    <img src='myImageMobile.jpg' alt='me' class='item-img-mobile'>
    <img src='myImage.jpg' alt='me' class='item-img-desktop'>
  </div>
  <div class='item'>
    <img src='myImageMobile2.jpg' alt='me' class='item-img-mobile'>
    <img src='myImage.jpg2' alt='me' class='item-img-desktop'>
  </div>
</div>

CSS

.item-img-desktop {
  display: none;
}

@media all and (min-width: 768px) {
  .item-img-desktop {
    display: block;
  }

  .item-img-mobile {
    display: none;
  }
}

当然，您可以使用<picture>标签代替包装器div。

光滑的滑块-移动图片版本

1 个答案: