使用 BxSlider 更改 html 背景

Question

嗨，我正在嘗試弄清楚如何擁有它，以便當我更改圖像時，我的 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>

Answer 1

我找到的解決方案是更改 bxslider css（這些步驟適用於rails用戶）。

第一步：找到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 ）

第二步：打開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 $納米 bxslider.css.scss

第 3 步：更改 bxslider css 文件。

提交所有行並添加background:rgba(0,0,0,0); 在主題下的 .bx-wrapper 類中（提交而不是刪除，以便您可以輕松更改回來）在我的情況下，它從第 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 資產：預編譯 --trace

在您的項目文件夾中

編輯：第 5 步不要忘記更改生產中的文件！！！

Answer 2

要將主體設置為綠色背景，請執行以下操作：

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

使用樣式表的另一種方法是在您的 body 元素上設置一個屬性，如下所示：

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

...然后有一個包含以下內容的 CSS 文件：

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

等等。