lightSlider indicator issue
When slideMove = item - 1, then an extra indicator is rendered.
HTML
<link rel="stylesheet" href="//sachinchoolur.github.io/lightslider/lightSlider/css/lightSlider.css">
<script src="//sachinchoolur.github.io/lightslider/lightSlider/js/jquery.lightSlider.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.4.1/holder.js"></script>
<div class="container">
<ul id="lightSlider">
<li><img data-src="holder.js/220x76/auto/sky/text:Slide 1" alt="Slide 1"></li>
<li><img data-src="holder.js/220x76/auto/vine/text:Slide 2" alt="Slide 2"></li>
<li><img data-src="holder.js/220x76/auto/lava/text:Slide 3" alt="Slide 3"></li>
<li><img data-src="holder.js/220x76/auto/sky/text:Slide 4" alt="Slide 4"></li>
<li><img data-src="holder.js/220x76/auto/vine/text:Slide 5" alt="Slide 5"></li>
<li><img data-src="holder.js/220x76/auto/lava/text:Slide 6" alt="Slide 6"></li>
<li><img data-src="holder.js/220x76/auto/sky/text:Slide 7" alt="Slide 7"></li>
<li><img data-src="holder.js/220x76/auto/vine/text:Slide 8" alt="Slide 8"></li>
<li><img data-src="holder.js/220x76/auto/lava/text:Slide 9" alt="Slide 9"></li>
</ul>
</div>
CSS
img { width:100%; }
.container { width:100px; }
JavaScript
$(document).ready(function() {
$('#lightSlider').lightSlider({
adaptiveHeight: true,
item: 5,
slideMove: 4,
slideMargin: 6,
responsive: [
{
breakpoint: 800,
settings: {
item: 3,
slideMove: 2
}
},
{
breakpoint: 480,
settings: {
item: 2,
slideMove: 1
}
}
]
});
});