How do i minimize margin in between elements on bxslider

Question

I have implemented jquery bx-slider carousel. Following is my carousel parameters. I am trying to minimize space between slider element, for that I have used sliderMargin but it will not work for me can any one please suggest?

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

It looks as if you wanted to have 20px between slides, you'd have to use a negative number and slideMargin ignores negative numbers. Using CSS will help you tame bxSlider's slide margins.

#carousel2 li {
   margin: 0 40px;
}

If you want 20px between slides, try -10px instead of 40px.

SNIPPET

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