Целевой активный элемент в гладкой карусели - PullRequest
Новая
       24

Целевой активный элемент в гладкой карусели

0 голосов
/ 22 ноября 2018

Эй, ребята, я не могу найти решение для нацеливания на активный элемент в скользкой карусели.Все, что я хочу сделать, это добавить стиль к активному элементу, на который нажали.

Я пробовал 

.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }

.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}

Первый вариант сработал, если слайд содержал несколько элементов, но мне не нужно было жестко кодировать это для каждого добавленного элемента.

ЕслиЯ использую .slick-active{}, он будет нацелен на показ всех элементов.

Есть идеи?Я использую пятно карусель.

1 Ответ

0 голосов
/ 26 ноября 2018

Да, .slick-active применяется ко всем текущим скользящим элементам, которые видны в вашей карусели, класс, который вы ищете для выбранного в данный момент элемента: .slick-current

Ваше правило будет следующим: 

.slick-slide               { background: white;}
.slick-slide.slick-current { background: lightgray;}

Вот рабочий пример ниже, нажмите синюю Фрагмент кода запуска внизу, чтобы увидеть его в действии. 

$('#slider').slick({
  infinite: true,
  slidesToShow: 3,
  centerMode: true,
  slidesToScroll: 1
});
h1 {
  text-align: center;
  color: red;
  margin: 0;
}
.slick-slide {
  background-color: white;
}
.slick-slide.slick-current h1 {
  background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div id="slider">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
</div>
...