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背景变化

回答

相关问题