slick.js test

Test to demonstrate how prev/next buttons get removed after adding a panel

by Brian Layman

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<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>

CSS

.carousel div {
  height: 200px;
  width: 200px;
  background-color: grey;
  overflow: hidden;
}

.carousel2 div {
  height: 200px;
  width: 200px;
  background-color: blue;
  z-index: 9999;
}

span.slick-prev, span.slick-next {
  background-color: white;
  font-size: 72px;
  max-width: 50px;
}

JavaScript

$(document).ready(function(){
  $('.carousel').slick({
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
    prevArrow: "<span class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></span>",
  nextArrow: "<span class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></span>"}  
 
  }
 );

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