title: slick setting active slide
body: <p>I have implemented slick (<a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a>) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.</p>
  
  <p>The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.</p>
  
  <p>I would appreciate any assistance from the community. Thanks</p>
  
  <p>**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **</p>
  
  <pre><code>&lt;div class="row"&gt;
  
              &lt;?php 
  
              $query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
  
              $newmenu = new menu();
              $value = $newmenu-&gt;mysqlquery($query_gallery);
  
              while ($row = mysqli_fetch_array($value))
              { ?&gt;      
  
                              &lt;div class='col-sm-4'&gt;
                                  &lt;a title='&lt;?php echo($row[0]); ?&gt; href='#'&gt; 
                                      &lt;img class='thumbnail img-responsive images' id='&lt;?php echo($row[2]); ?&gt;' title='&lt;?php echo($row[0]); ?&gt;' src='&lt;?php echo($row[1]); ?&gt;' data-menuid="&lt;?php echo($row[2]); ?&gt;"&gt;
                                      &lt;p class='images text-center'&gt;&lt;?php echo($row[0]); ?&gt;&lt;/p&gt;
                                      &lt;p id="demo"&gt;&lt;/p&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
              &lt;?php } ?&gt;
  
  
                              &lt;div class='modal' id='modal-gallery' role='dialog'&gt;
                                &lt;div class='modal-dialog'&gt;
                                  &lt;div class='modal-content'&gt;
                                    &lt;div class='modal-header'&gt;
                                        &lt;button class='close' type='button' data-dismiss='modal'&gt;×&lt;/button&gt;
                                        &lt;h3 class='modal-title text-center'&gt;&lt;/h3&gt;
                                    &lt;/div&gt;
                                    &lt;div class='modal-body'&gt;
                                        &lt;div id='modal-carousel' class='text-center'&gt;
  
  
                                          &lt;div class='your-content'&gt;
                                          &lt;?php 
  
                                          $query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
  
                                          $newmenu = new menu();
                                          $value = $newmenu-&gt;mysqlquery($query_gallery); $counter = 0;
  
                                          while ($row = mysqli_fetch_array($value))
                                          { ?&gt; 
                                          &lt;div id="menulist" data-menuid="&lt;?php echo $counter++; ?&gt;"&gt;
                                                  &lt;h1&gt;'&lt;?php echo($row[0]); ?&gt;'&lt;/h1&gt;
                                                  &lt;img class='modal-thumbnail' id='&lt;?php echo($row[2]); ?&gt;' title='&lt;?php echo($row[0]); ?&gt;' src='&lt;?php echo($row[1]); ?&gt;' data-menuid="&lt;?php echo($row[2]); ?&gt;"&gt;
                                          &lt;/div&gt;
                                          &lt;?php } ?&gt;
                                          &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;div class='modal-footer'&gt;
                                        &lt;button class='btn btn-default' data-dismiss='modal'&gt;Close&lt;/button&gt;
                                    &lt;/div&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;                          
              &lt;/div&gt;
              &lt;/div&gt;  
  
  &lt;script type="text/javascript" src="js/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="resources/slick/slick/slick.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  
  $('.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
    });
  });
  
  &lt;/script&gt;
  </code></pre>