Question

我已经实现了jquery bx-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" />'
  });

<！/ P>

＆＃13;

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

＆＃13;

Answer 1

看起来你想要在幻灯片之间保持20px，你必须使用负数而slideMargin忽略负数。使用CSS将帮助您驯服bxSlider的幻灯片边距。

#carousel2 li {
   margin: 0 40px;
}

如果你想要幻灯片之间的20px，请尝试使用-10px而不是40px。

段

＆＃13;

$('#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>'
});

＆＃13;

#carousel2 li {
  margin: 0 40px;
}

＆＃13;

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

＆＃13;

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

1 个答案:

段