jquery - 如何最小化 bxslider 上元素之间的边距

Question

我已经实现了 jquery bx-slider 轮播。以下是我的轮播参数。我正在尝试最小化 slider 元素之间的空间，因为我已经使用了 sliderMargin 但它对我不起作用，有人可以建议吗？

$('#carousel2').bxSlider({
      auto: true,
      pager: false,
      minSlides: 4,
      maxSlides: 4,
      moveSlides: 1,
      slideWidth: 400,
      slideMargin: 10,
      nextSelector: '.slider-next2',
      prevSelector: '.slider-prev2',
      nextText: '<img src="${ this.static_url('ka/images/slider-next2.png') }" alt="slider next" />',
      prevText: '<img src="${ this.static_url('ka/images/slider-prev2.png') }" alt="slider prev" />'
  }); 

!

<a href="http://tinypic.com?ref=1zn9c7l" target="_blank"><img src="http://i65.tinypic.com/1zn9c7l.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Answer 1

看起来如果您希望幻灯片之间有 20px，则必须使用负数，并且 slideMargin 会忽略负数。使用 CSS 将帮助您控制 bxSlider 的幻灯片边距。

#carousel2 li {
   margin: 0 40px;
}

如果您希望幻灯片之间的间距为 20 像素，请尝试使用 -10 像素而不是 40 像素。

片段

$('#carousel2').bxSlider({
  auto: true,
  pager: false,
  minSlides: 4,
  maxSlides: 4,
  moveSlides: 1,
  slideWidth: 400,
  nextSelector: '.slider-next2',
  prevSelector: '.slider-prev2',
  nextText: '<i class="fa fa-chevron-circle-right"></i>',
  prevText: '<i class="fa fa-chevron-circle-left"></i>'
});

#carousel2 li {
  margin: 0 40px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul id='carousel2'>

  <li>
    <img src="http://placehold.it/50x50/000/fff?text=1">
  </li>
  <li>
    <img src="http://placehold.it/50x50/00f/fc0?text=2">
  </li>
  <li>
    <img src="http://placehold.it/50x50/0e0/222?text=3">
  </li>
  <li>
    <img src="http://placehold.it/50x50/5ce/eff?text=4">
  </li>
  <li>
    <img src="http://placehold.it/50x50/8df/000?text=5">
  </li>
  <li>
    <img src="http://placehold.it/50x50/f69/bde?text=6">
  </li>
  <li>
    <img src="http://placehold.it/50x50/0da/a44?text=7">
  </li>
  <li>
    <img src="http://placehold.it/50x50/c4c/12f?text=8">
  </li>
  <li>
    <img src="http://placehold.it/50x50/06b/fc0?text=9">
  </li>
  <li>
    <img src="http://placehold.it/50x50/000/f00?text=10">
  </li>
</ul>
<nav>
  <span class="slider-prev2"></span>
  <span class="slider-next2"></span>
</nav>