SLICK - nested example
Breakpoint at line 1139, the find returns slides from both sliders
HTML
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" href="//kenwheeler.github.io/slick/slick/slick.css">
Breakpoint at line 1139, the find returns slides from both sliders when outer slider is swiped.
<div class="autoplay">
<div class="slide slide1">
<h3>1</h3>
<div class="fadeinner">
<div class="slideinner slide1"></div>
<div class="slideinner slide2"></div>
<div class="slideinner slide3"></div>
</div>
</div>
<div class="slide slide2">
<h3>2</h3>
<div class="fadeinner">
<div class="slideinner slide1"></div>
<div class="slideinner slide2"></div>
<div class="slideinner slide3"></div>
</div>
</div>
<div class="slide slide3">
<h3>3</h3>
</div>
</div>
CSS
body, html {
background: #3498db;
color:#FFFFFF;
}
h3 {
font-size:48px;
float:left;
}
.fade {
width:80%;
margin:0 auto;
}
.slide {
width:200px;
height:300px;
border:1px solid gray;
padding:10px;
text-align:center;
}
.fadeinner {
width:150px;
float:right;
border:2px solid red;
}
.slideinner {
width:100px;
height:80px;
background-size:cover;
}
.slide1 {
background-image:url(http://kenwheeler.github.io/slick/img/fonz1.png);
}
.slide2 {
background-image:url(http://kenwheeler.github.io/slick/img/fonz2.png);
}
.slide3 {
background-image:url(http://kenwheeler.github.io/slick/img/fonz3.png);
}
JavaScript
$('.autoplay').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
swipeToSlide:true,
slidesToShow:1
});
$('.fadeinner').slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 2100,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false
});