将滑块滑入滑块

Question

我正在尝试使用 slick 滑块插件将滑块添加到滑块中：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();
});

演示 http://jsfiddle.net/mattydsw/emuhpvz7/1/