Javascript 使用BxSlider更改html背景

嗨，我正试图弄清楚如何使用它，这样，当我更改图像时，html中的背景也会更改。另外，如何使滑块透明，使其不显示白色部分（参见图）。感谢您提供的任何帮助/建议：）

HTML:

JS:

jQuery（文档）.ready（函数（）{
jQuery（'.bxslider'）.bxslider({
传呼机：错，
自适应高度：正确，
滑动宽度：900，
下一个选择器：“#下一个”，
prevSelector:“#prev”，
下一步：“下一步”，
prevText:“PREV”
});
});
bxSlider.$On（$bxSlider$.$EVT_PARK，函数（slideIndex，fromeIndex）{
如果（slideIndex==0）{
$（'body'）.css（“绿色”）
}
else if（slideIndex==1）{
//将容器背景颜色更改为蓝色
}
});

---

要将主体设置为绿色背景，请执行以下操作：

$('body').css( "background-color", "green" );

另一种方法是使用样式表，在body元素上设置如下属性：

$('body').attr("data-slide-index", slideIndex);

body[data-slide-index=0] {   background-color: green; }
body[data-slide-index=1] {   background-color: blue; }
body[data-slide-index=2] {   background-color: yellow; }

…然后有一个包含如下内容的CSS文件：

$('body').attr("data-slide-index", slideIndex);

body[data-slide-index=0] {   background-color: green; }
body[data-slide-index=1] {   background-color: blue; }
body[data-slide-index=2] {   background-color: yellow; }

---

等等。

我找到的解决方案是更改bxslider css（步骤针对rails用户）

步骤1：查找bxslider css文件

运行

bundle显示bxslider

结果应该是位置（在我的例子中：

/home/user/.rvm/rubies/ruby-2.3.1/lib/ruby/gems/2.3.0/gems/bxslider-rails-4.2.5.1

）

步骤2：打开bxslider css文件

使用nano或任何其他编辑器 $cd/home/user/.rvm/rubies/ruby-2.3.1/lib/ruby/gems/2.3.0/gems/bxslider-rails-4.2.5.1/vendor/assets/stylesheets $nano bxslider.css.scss

步骤3：更改bxslider css文件

提交所有行并添加

background:rgba（0,0,0,0）在主题下的.bx包装类中（提交而不是删除，以便您可以轻松更改），在我的示例中，它从第38行开始（版本4.2.5.1）：

步骤4创建新的css文件：

跑

bundle exec rake资产：预编译--跟踪

在项目文件夹中

编辑：
第5步不要忘记在生产中更改文件
 谢谢你的快速回复。我正在尝试，但为什么他们说“幻灯片索引未定义”？我在上面的问题中添加了截图
.bx-wrapper {
//  -moz-box-shadow: 0 0 5px #ccc;
//  -webkit-box-shadow: 0 0 5px #ccc;
//  box-shadow: 0 0 5px #ccc;
//  border: 5px solid #fff);
//  background: #fff;
  background:rgba(0,0,0,0);
}