Создать для каждого из слайдеров контейнеры с разными классами или id и переопределять стили селектясь на этот контейнер.
Например есть 2 слайдера:
<!-- Первый слайдер -->
<div class="primary-slider">
<ul id="first-slider">
<li>
<h3>First Slide</h3>
<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
<h3>Second Slide</h3>
<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
...
</ul>
</div>
<!-- Второй слайдер -->
<div class="secondary-slider">
<ul id="second-slider">
<li>
<h3>First Slide</h3>
<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
<h3>Second Slide</h3>
<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
...
</ul>
</div>
Инициализируем каждый из слайдеров
$(document).ready(function() {
$("#first-slider").lightSlider();
$("#second-slider").lightSlider();
});
Теперь можем переопрелить стили каждого слайдера по отдельности
// первый слайдер
.primary-slider .lSPrev {
...
}
.primary-slider .lSNext {
...
}
...
// второй слайдер
.secondary-slider .lSPrev {
...
}
.secondary-slider .lSNext {
...
}
...
