Question

我正在尝试使用光滑的滑块插件将滑块添加到滑块中：http://kenwheeler.github.io/slick/

现在我有以下标记：

<div id="layouts">
    <!-- Slide Item -->
    <div class="layout-item">
        <h2>I am an item</h2>
        <div class="overlay">
            <div>Another Slider Content</div>
            <div>Another Slider Content</div>
            <div>Another Slider Content</div>
        </div>
    </div>
    <!-- # Slide Item -->
    <!-- Slide Item -->
    <div class="layout-item">
        <h2>I am an item</h2>
        <div class="overlay">
            <div>Another Slider Content</div>
            <div>Another Slider Content</div>
            <div>Another Slider Content</div>
        </div>
    </div>
    <!-- # Slide Item -->
</div>

我运行了第一个“项目”滑块，点击（例如）<h2>将打开叠加层，叠加层内的<div>是下一个滑块。但那就是问题......第二个滑块无效。

Answer 1

我在css中隐藏了.overlay个元素（子滑块）。

.overlay {
    display: none;
}

点击h2我会显示其他内容（淡入）并初始化此元素旁边的第二个滑块。

$('h2').click(function() {
    $(this).next('.overlay')
        .fadeIn()
        .slick();
});

DEMO http://jsfiddle.net/mattydsw/emuhpvz7/1/

光滑滑块滑入滑块

1 个答案: