@Ukuloli
Начинающий веб разработчик

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

Два разных слайдера. Контент и оформление разное у обоих.
Первый слайдер сделал, стили под себя поправил в css файле слайдера. А вот как второй сделать, если стили под первый изменены?
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
@Jackardios
Фронтенд разработчик
Создать для каждого из слайдеров контейнеры с разными классами или 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 {
  ...
}
...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы