Slick slider within slider

Question

I'm using slick.js slider for a mobile website where users can swipe/slide from view to view.

In one of those views, I need to display another slider for images. The problem is that when I slide the image-gallery, the main slides are activated and vice versa. I have named each slider differently, but I can't seem to find a way to disable the 'Big slider' when I'm interacting with the 'image gallery'.

Here's what I've done:

<div class="carousel">
  <div>View 1</div>
    <div>Vliew 2
        <div class="carousel2">
            <div>Image 1</div>
            <div>Image 2</div>
            <div>Image 3</div>
        </div>
    <div>
<div>View 3</div>
</div>

The goal is that when 'carousel2' is interacted with, the carousel should not be moved, and when carousel1 is interacted with, carousel2 should not move.

Any ideas of how to achieve this? http://jsfiddle.net/q1qznouw/471/

Answer 1

You could force the carousel1 to stay at the current slide when mouse interact with the carousel2

  $('.carousel').slick();

  $('.carousel2').slick();

  $('.carousel2').on("mousedown mouseup", function() {
    $('.carousel').slick("slickGoTo", 1);
  });

This is not perfect though

http://jsfiddle.net/q1qznouw/468/