javascript - html BxSlider的背景变化

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



HTML：

<div class="container-fluid">

    <div class="row vertical-align">

        <div class="col-lg-3 col-md-3 col-sm-2 col-xs-12, left-col">
            <p><span id="prev"></span></p>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12" class="content">
          <!--       GALLERY -->
                <ul class="bxslider">
                    <li data-slide-index="0"><img src="assets/slides/image1.jpg"></li>
                    <li data-slide-index="1"><img src="assets/slides/image2.jpg"></li>
                    <li data-slide-index="2"><img src="assets/slides/image3.jpg"></li>
                </ul>

        </div>

        <div class="col-lg-3 col-md-3 col-sm-2 col-xs-12, right-col">
            <p><span id="next"></span></p>
        </div>

    </div>

</div>

JS：

<script type="text/javascript">

    jQuery(document).ready(function(){
        jQuery('.bxslider').bxSlider({
            pager:false,
            adaptiveHeight:true,
            slideWidth:900,
            nextSelector: '#next',
            prevSelector: '#prev',
            nextText: 'NEXT',
            prevText: 'PREV'
        });
    });

</script>

<script>
 bxSlider.$On($bxSlider$.$EVT_PARK, function (slideIndex, fromeIndex) {
        if (slideIndex == 0) {
            $('body').css("green")
        }
        else if (slideIndex == 1) {
            //change container background color to blue
        }
    });
 </script>

最佳答案

我发现的解决方案是更改bxslider css（这些步骤适用于rails用户）。

步骤1：找到bxslider css文件。

运行bundle show 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文件。

提交所有行，并在主题下的.bx-wrapper类中添加background:rgba(0,0,0,0);（提交而不删除，以便您可以轻松地更改回来），就我而言，它始于第38行（4.2.5.1版）：

.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);
}

步骤4创建新的CSS文件：

跑

捆绑exec rake资产：precompile --trace

在您的项目文件夹中

编辑：
步骤5不要忘记在生产环境中更改文件！！！

关于javascript - html BxSlider的背景变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30838542/