您好,我正在尝试弄清楚如何让它在我更改图片时,html 中的背景也会更改。另外,我怎样才能使 slider 透明,所以它不会显示白色部分(见图)。感谢您提供的任何帮助/建议:)
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 文件。
提交所有行并在 THEME 下的 .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 文件:
运行
bundle exec rake assets:precompile --trace
在你的元素文件夹中
编辑: 第 5 步不要忘记在生产环境中更改文件!!!
关于javascript - 使用 BxSlider 更改 html 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30838542/