如何修复bxslider中幻灯片和缩略图之间的间隙答案

【问题标题】：How to fix the gap between slide and thumbnail in bxslider如何修复bxslider中幻灯片和缩略图之间的间隙
【发布时间】：2017-03-19 15:32:08
【问题描述】：

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

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

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

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

请帮我看看有什么问题。

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

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

谢谢

【问题讨论】：

标签： asp.net-mvc bxslider

【解决方案1】：

我认为正在发生的是当 bxSlider 加载时，它会将其中的一些 CSS 直接应用于元素。内联样式覆盖几乎所有类型的样式（!important 除外）。抵消这种行为的一种方法是在回调 onSliderLoad 加载 bxSlider 后应用内联样式。

片段

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

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

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

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

<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>

【讨论】：