<div class="p-detail-photo">
    <div id="wrap">

    <ul id="thumbnail_slider">
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image1" alt="画像"></li>
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image2" alt="画像"></li>
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image3" alt="画像"></li>
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image4" alt="画像"></li>
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image5" alt="画像"></li>
        <li class="thumbnail-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image6" alt="画像"></li>
    </ul>
    <ul id="slider">
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image1" alt="画像"></li>
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image2" alt="画像"></li>
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image3" alt="画像"></li>
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image4" alt="画像"></li>
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image5" alt="画像"></li>
        <li class="slide-item"><img data-lazy="http://placehold.jp/eeeeee/cccccc/540x400.png?text=No%20Image6" alt="画像"></li>
    </ul>

    </div>
</div>

<script src="/business/js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/business/css/slick.css">
<link rel="stylesheet" type="text/css" href="/business/css/slick-theme.css">

<script type="text/javascript">
$(function(){
 var mainSlider = "#slider"; //メインスライダーid
 var thumbnailSlider = "#thumbnail_slider"; //サムネイルスライダーid
 
  $(mainSlider).slick({
    autoplay: true,
    speed: 1000,
    arrows: false,
    asNavFor: thumbnailSlider
  });
  $(thumbnailSlider).slick({
    slidesToShow: 3,
    speed: 1000,    
    asNavFor: mainSlider
  });
  //#thumbnail_sliderでクリックしたスライドをカレントにする
  $(thumbnailSlider+" .slick-slide").on('click',function(){
    var index = $(this).attr("data-slick-index");
    $(thumbnailSlider).slick("slickGoTo",index,false);
  });
});
</script>