如何为Slider Revolution滑块背景图添加ID或class，实现移动端背景图适配

内置功能实现（推荐，无需自定义代码） #

Slider Revolution 6.0及以上的付费完整版已经原生支持多设备背景图独立配置，操作路径如下：

• 进入对应滑块的编辑界面，在左侧Slide列表选中需要调整的单张滑块，打开右侧的背景配置选项卡
• 选项卡顶部可看到桌面/平板/手机三类设备的切换图标，点击对应移动端图标后，上传/选择你要在该设备端展示的背景图
• 保存滑块设置后，插件会自动根据访问设备的尺寸加载匹配的背景图，不需要额外编写media queries规则

如果你的编辑器内没有找到该设备切换入口，通常是使用了低于6.0的旧版本，或是功能受限的免费基础版，可采用下面的自定义代码方案实现。

自定义代码适配方案 #

第一步：给滑块添加自定义类标识 #

你不需要手动给背景图元素加ID/类，只需要给整个滑块或者对应Slide添加自定义类即可：

• 若要全局修改整个滑块的所有背景图适配规则：进入滑块编辑页后，打开右侧模块通用设置面板，找到「自定义CSS类」输入框，填写你自定义的类名，例如mobile-adapt-slider
• 若只需要修改单张Slide的背景图：选中目标Slide后，在右侧的Slide设置面板找到「自定义类」输入框，填写自定义类名，例如slide-1-mobile

第二步：编写media queries规则 #

你可以在网站主题的自定义CSS输入框，或者Slider Revolution自带的自定义CSS编辑框中添加如下代码：

/* 适配宽度767px及以下的移动设备 */
@media only screen and (max-width: 767px) {
  /* 替换成你自己的自定义类和移动端背景图地址 */
  .mobile-adapt-slider .tp-bgimg {
    background-image: url('这里替换成你的移动端背景图本地地址') !important;
  }
}

Slider Revolution的所有背景图默认都会挂载到带.tp-bgimg类的元素上，上述选择器可以直接命中目标元素。

内容的提问来源于stack exchange，提问作者jillatiktik