如何修复bxslider中幻灯片和缩略图之间的差距

Question

我的MVC 5应用程序中有bxslider。

有一个幻灯片显示图像，幻灯片正下方有一个缩略图列表。

目前，幻灯片和缩略图之间存在间隙，如图所示。

我读了这个thread并通过更改css文件中.bx-wrapper类中所述的边距来应用解决方案。修复程序会立即调整间隙....但是在刷新页面后，这并没有保持不变。刷新页面后，差距再次变大，就像原始状态一样。

请帮我解决错误。

我当前的.bx-wrapper类是这样的：

＆＃13;

＆＃13;

.bx-wrapper {
	position: relative;
	margin: 0 auto 5px; /*control the gap between slider and thumbnail*/
	padding: 0;
	*zoom: 1;
}

＆＃13;

＆＃13;

＆＃13;

由于

Answer 1

我认为正在发生的事情是当bxSlider加载时，它会直接在元素上应用它的一些CSS。内联样式几乎覆盖任何类型的样式（例外!important）。抵消该行为的一种方法是在回调onSliderLoad加载bxSlider后应用内联样式。

<强>段

＆＃13;

＆＃13;

var bx = $('.bx').bxSlider({
  onSliderLoad: adjust,
  pagerCustom: '.bx-nav'
});

function adjust(current) {
  var bxw = document.querySelector('.bx-wrapper');
  bxw.style.marginBottom = 0;
}

＆＃13;

img {
  display: inline-block;
  margin: 0 auto;
}

nav {
  margin: 0 auto;
  display:table;
}

＆＃13;

<link href='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>


<ul class='bx'>
  <li class='slide'>
    <img src='http://placehold.it/250x150/000/fff?text=1'></li>
  <li class='slide'>
    <img src='http://placehold.it/250x150/00f/eee?text=2'></li>
  <li class='slide'>
    <img src='http://placehold.it/250x150/0e0/111?text=3'></li>

</ul>

<nav class="bx-nav">
  <a data-slide-index="0" href="#/">
    <img src='http://placehold.it/50x50/000/fff?text=1'></a>
  <a data-slide-index="1" href="#/">
    <img src='http://placehold.it/50x50/00f/eee?text=2'></a>
  <a data-slide-index="2" href="#/">
    <img src='http://placehold.it/50x50/0e0/111?text=3'></a>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

＆＃13;

＆＃13;

＆＃13;