CODEWITHSUNDEEP
jqueryslider
jensfichtel
jensfichtel

Reputation: 77

Slick Slider into Slider

I'm trying to add a slider into a slider with the slick slider plugin: http://kenwheeler.github.io/slick/

Now I have following markup:

<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>

I have the first "item" slider running, a click on (for example) the <h2> will open the Overlay and the <div>'s inside the overlay are the next slider. But that is the Problem... the second slider is not working.

Upvotes: 1

Views: 1794

Answers (1)

mkutyba
mkutyba

Reputation: 1427

I hide .overlay elements (sub-sliders) in css.

.overlay {
    display: none;
}

On click h2 I show additional content (fade in) and initialize second slider next to this element.

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

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

Upvotes: 2

Related Questions