Question

我有问题。我使用uikit slider。在屏幕上输出3个元素，当幻灯片更改时，可见元素的类别（uk-active）也会更改。我需要从活动中选择中心元素（css nth-child不起作用）。有人可以告诉我如何正确执行吗？也许上课。代码：

<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>Title1</strong>
                <p>Some text.</p>   
            </div>
        </li>
        <li>
            <div class="services-box">
                <strong>Title2</strong>
                <p>Some text.</p>   
            </div>
        </li>
        <li>
            <div class="services-box">
                <strong>Title3</strong>
                <p>Some text.</p>   
            </div>
        </li>
        <li>
            <div class="services-box">
                <strong>Title4</strong>
                <p>Some text.</p>   
            </div>
        </li>
        <li>
            <div class="services-box">
                <strong>Title5</strong>
                <p>Some text.</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>
</div>

Link on Codepen

Answer 1

尝试文档中提供的JavaScript事件：https://getuikit.com/docs/slider#javascript

我能够使用文档中提供的功能来获取中间元素。相同的简单示例：

https://codepen.io/anon/pen/KBMvqP#anon-signup

UIkit.util.on('#services-slider', 'itemshown', function () {
     active_slides = document.getElementsByClassName("uk-active");
     active_slides[1].appendChild(document.createTextNode("bar"));
});

这不太花哨，但我希望您能得到我在这里所做的事情，并可以相应地修改您的代码。

Answer 2

var centralActive;
$('.navigate :button').click(function() {
   var targetNum = parseInt($(this).attr('uk-slider-item')) + 1;
   centralActive = $('.services-box')[targetNum]
})

Codepen demo

将课程分配给中央模块

2 个答案: