0

Появилась проблема, использую uikit, а именно слайдер (ссылка). Вывожу по 3 элемента на экране, при смене слайда меняется и класс видимых элементов (uk-active). Мне необходимо выделить центральный элемент из активных (он будет отличаться стилями). Пробовал nth-child в css и js, первый не адекватно работает (задает стиль при загрузке), js вообще не пойму как функционирует. Может кто-то подскажет, как мне правильно сделать функционал? Сам код

<div id="services-slider" uk-slider>

<ul class="uk-slider-items uk-child-width-1-1 uk-child-width-1-3@s uk-child-width-1-3@m">
    <li>
        <div class="services-box">
            <strong>Заголовок1</strong>
            <p>Тут какой-то текст.</p>   
        </div>
    </li>
    <li>
        <div class="services-box">
            <strong>Заголовок2</strong>
            <p>Тут какой-то текст.</p>   
        </div>
    </li>
    <li>
        <div class="services-box">
            <strong>Заголовок3</strong>
            <p>Тут какой-то текст.</p>   
        </div>
    </li>
    <li>
        <div class="services-box">
            <strong>Заголовок4</strong>
            <p>Тут какой-то текст.</p>   
        </div>
    </li>
    <li>
        <div class="services-box">
            <strong>Заголовок5</strong>
            <p>Тут какой-то текст.</p>   
        </div>
    </li>
</ul>

<div class="navigate">  
    <button uk-slider-item="0">01</button>
    <button uk-slider-item="1">02</button>
    <button uk-slider-item="2">03</button>
    <button uk-slider-item="3">04</button>
    <button uk-slider-item="4">05</button>
</div>

Ссылка Заранее спасибо.

1 ответ 1

0

Тогда так.

раз у вас 3 элемента, а нужно обстилить средний, то навешивайтесь на второй+последующие:

ul.uk-slider-items li.uk-active + li.uk-active {
    border: 3px solid red;
}

а потом для третьего+последующих отмените стиля:

ul.uk-slider-items li.uk-active + li.uk-active + li.uk-active {
    border: 0px none;
}
2
  • Я тоже так сначала поступил, только с nth-child(2), но метод не работает, он присваивает только при загрузке, а при переключении не работает.
    – Buzater
    13 июл 2018 в 9:14
  • Изменил свой ответ. Костыль, но работает. 15 июл 2018 в 6:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.