Slick Slider Custom Arrows Demo

by Brian Layman

HTML

<script src="//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">
Some previous version was the last working version. Sorry about the abandoned code.
<div id="carousel1wrapper">

    <div class="slick-prev pull-left slick-arrow" style="display: block;"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
  <div id="carousel1innerwrapper">
      <div class="carousel1">
        <div>View 1</div>
        <div>View 2
            <div class="carousel2">
                <div>Image 1</div>
                <div>Image 2</div>
                <div>Image 3</div>
            </div>
        </div>
        <div>View 3</div>
      </div>
  </div>
  <div class="slick-next pull-left slick-arrow" style="display: block;"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
  </div>

CSS

div.carousel1 {
  height: 200px;
  width: 600px;
  background-color: grey;
}

#carousel1innerwrapper {
  z-index: -1;
  float: left;
}

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

div.slick-prev, div.slick-next {
  background-color: white;
  font-size: 322px;
  color: lightgray;
  z-index: 3;
 
}

JavaScript

$(document).ready(function(){
  $('.carousel1').slick({
  infinite: true,
  speed: 300,
  slidesToShow: 2,
  slidesToScroll: 1,
  prevArrow: $("#carousel1wrapper div.slick-prev"),
  nextArrow: $("#carousel1wrapper div.slick-next")
 
  }
 );

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