html與BxSlider背景變化

嗨我想弄清楚如何讓它，當我改變我的形象，我的HTML更改以及背景。另外，我怎樣才能使滑塊透明，所以它不會顯示白色部分（見圖片）。感謝您的幫助/給出的建議:)html與BxSlider背景變化

enter image description here

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>

enter image description here

來源

2015-06-15 user3453264

定身有一個綠色的背景，請執行：

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

的另一種方法，使用樣式表，是設置你的身體元素這樣的一個屬性：

$('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; }

等

來源

2015-06-15 06:38:59

感謝您的快速回復。我正在嘗試，但爲什麼他們說「幻燈片索引未定義」？ – user3453264

此錯誤消息出現在哪裏？ –

我在上面的問題中添加了屏幕截圖 – user3453264

的溶液中發現的I是改變bxslider CSS（步驟是用於導軌用戶）。

第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文件。

納米或任何其他編輯器 $ 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，包裝類添加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耙資產：預編譯--trace

在您的項目文件夾

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

來源

2016-10-03 12:37:52 ChaosPredictor

html與BxSlider背景變化

回答

相關問題