光滑的设置活动幻灯片

Question

我已经实现了光滑（http://kenwheeler.github.io/slick/）并且一切都很好，除了第一张幻灯片是显示的第一张图片而不是从图片列表中点击的图片，比如图片5，将显示图片1。我正在使用PHP来尝试自动化该过程。

col-sm-4 while循环显示页面上的所有图像，然后单击时会弹出一个带有光滑的模态并在模态内显示图像。正如我所说，这个过程很好，除了点击图像的位置。例如，我从col-sm-4图像列表中单击图像6，但显示图像1。

我希望得到社区的任何帮助。感谢

** UPdate ..为每个div添加一个数据/ var和计数器menuid，我只是不确定如何在Slick JS initialSlide选项中访问它：**

<div class="row">

            <?php 

            $query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";

            $newmenu = new menu();
            $value = $newmenu->mysqlquery($query_gallery);

            while ($row = mysqli_fetch_array($value))
            { ?>      

                            <div class='col-sm-4'>
                                <a title='<?php echo($row[0]); ?> href='#'> 
                                    <img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
                                    <p class='images text-center'><?php echo($row[0]); ?></p>
                                    <p id="demo"></p>
                                </a>
                            </div>
            <?php } ?>


                            <div class='modal' id='modal-gallery' role='dialog'>
                              <div class='modal-dialog'>
                                <div class='modal-content'>
                                  <div class='modal-header'>
                                      <button class='close' type='button' data-dismiss='modal'>×</button>
                                      <h3 class='modal-title text-center'></h3>
                                  </div>
                                  <div class='modal-body'>
                                      <div id='modal-carousel' class='text-center'>


                                        <div class='your-content'>
                                        <?php 

                                        $query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";

                                        $newmenu = new menu();
                                        $value = $newmenu->mysqlquery($query_gallery); $counter = 0;

                                        while ($row = mysqli_fetch_array($value))
                                        { ?> 
                                        <div id="menulist" data-menuid="<?php echo $counter++; ?>">
                                                <h1>'<?php echo($row[0]); ?>'</h1>
                                                <img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
                                        </div>
                                        <?php } ?>
                                        </div>
                                      </div>
                                  <div class='modal-footer'>
                                      <button class='btn btn-default' data-dismiss='modal'>Close</button>
                                  </div>
                                </div>
                              </div>
                            </div>                          
            </div>
            </div>  

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>


$('.thumbnail').click(function(){
 $("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});


var menulist = $("#menulist");
var menuid = menulist.data("menuid");

    $( "#menulist" ).click(function() {
    var myId = $( "#menulist" ).data("menuid");
    $( "#menulist" ).attr("menuid", myId);
    });

$(document).ready(function(){
  $('.your-content').slick({
      /* lazyLoad: 'ondemand', */
      /* centerMode: true, */
      dots: true,
      /* infinite: true, */
      speed: 500,
      fade: true,
      adaptiveHeight: true,
      focusOnSelect: true,
      cssEase: 'linear',
      /* initialSlide: 1, */
      setPosition: 1,
      /* slickGoTo: 8, */
      initialSlide: menuid
  });
});

</script>