Как сделать два слайдера lightslider на странице?

Question

[Альберт]

Два разных слайдера. Контент и оформление разное у обоих.
Первый слайдер сделал, стили под себя поправил в css файле слайдера. А вот как второй сделать, если стили под первый изменены?

Answer 1

[Салават Салахутдинов]

Создать для каждого из слайдеров контейнеры с разными классами или 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 {
  ...
}
...