0

Я не могу понять нашел род. элемент слайдера в devTools, но стили не применяются к нему. Могу поменять стили в подключенном css файле слайдера, но тогда они ко всем слайдерам применяться эти стили. Использую слайдер lightslider.
.slider-item - отвечает за отдельный контент в слайдере(текст, картинка) c ним или без него все равно стили не применяются.

.lSSlideOuter .lSSlideWrapper .blog-slider .slider-item .lSPager > li a {
  background-color: pink ;
  color: red;
}

введите сюда описание изображения Вот HTML структура: введите сюда описание изображения

Остин
  • 335

1 Answers1

1

Все работает.

$(document).ready(function() {

var autoplaySlider = $('#lightSlider').lightSlider({
    loop:true,
    pauseOnHover: true,

});




});
.content-slider li {
    background-color: #ed3020;
    text-align: center;
    color: #FFF;
}

.content-slider h3 {
    margin: 0;
    padding: 70px 0;
}

.parent .lSSlideOuter .lSPager > li a {
  background: cyan;
} 

.lSSlideOuter .lSPager.lSpg>li.active a, .lSSlideOuter .lSPager.lSpg>li:hover a {
    background-color: #ffeb00 ;
}
.parent .lSSlideOuter .lSPager > li a {
    background: black;
}
.lSAction>a{
  background-image: url(http://icongal.com/gallery/image/115350/left_arrow_green_back.png) !important;
    background-position: center !important;
    background-size: 103%;
}

/*Для примера что бы перевернуть стрелку если не используйте спрайты*/
a.lSNext {
    transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/css/lightslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/js/lightslider.min.js"></script>



<div class="parent">
  <ul id="lightSlider" class="content-slider lightSlider lSSlide lsGrabbing" style="">
    <li class="slider-item" style="">
      <h3>5</h3
    </li>
    <li class="slider-item" style="">
      <h3>6</h3>
    </li>
    <li class="slider-item" style="">
      <h3>7</h3>
    </li>
    <li class="slider-item" style="">
      <h3>8</h3>
    </li>
      <li class="slider-item" style="">
      <h3>4</h3>
    </li>
    <li class="slider-item" style="">
      <h3>3</h3>
    </li>
    <li class="slider-item" style="">
      <h3>2</h3>
    </li>
    <li class="slider-item" style="">
      <h3>1</h3>
    </li>
  </ul>
</div>
Даниил
  • 3,443