jquery - Getting slick.js to display correct main image in middle -

i've created popup when image clicked popup show slider. i'm using slick.js slider syncing. problem i'm having when click on image active nav image shown on left instead of centre , when click on image rights , active nav image in centre. did have adjust nav images , spacing.

my single-gallery.blade.php

<div id="portfolio_button">     <img src="portfolio_images/thumbs/blue_crop.jpg"> </div>  <div id="mymodal" class="modal">     <div class="modal-content">         <span class="close">             &times;         </span>          <div class="portfolio_popup">             <div class="portfolio_wrapper">                 <div>                     <img src="portfolio_images/blue.jpg">                     <img src="portfolio_images/green.jpg">                     <img src="portfolio_images/black.jpg">                 </div>             </div>              <div class="portfolio_nav">                 <div>                     <img src="portfolio_images/blue.jpg">                     <img src="portfolio_images/green.jpg">                     <img src="portfolio_images/black.jpg">                 </div>               </div>         </div>     </div> </div> 

my style.css

#portfolio_button {     width: 17%;     cursor: pointer; }  .modal {     display: none; /* hidden default */     position: fixed; /* stay in place */     z-index: 1; /* sit on top */     left: 0;     top: 0;     width: 100%; /* full width */     height: 100%; /* full height */     overflow: auto;  /* enable scroll if needed */     background-color: rgb(0,0,0); /* fallback color */     background-color: rgba(0,0,0,0.4); /* black w/ opacity */ }  .modal-content {     background-color: #fefefe;     margin: 2% auto; /* 15% top , centered */     padding: 20px;     border: 1px solid #888;     width: 80%; /* more or less, depending on screen size */ }  .close {     color: #101010;     font-size: 28px;     font-weight: bold;     position: absolute;     right: 2%;     z-index: 1;     top: 0; }  .close:hover, .close:focus {      color: black;      text-decoration: none;      cursor: pointer;  }  .portfolio_wrapper {     margin-bottom: 15px; }  .portfolio_nav .slick-list .slick-track div {     margin-right: 10px; }  .portfolio_nav {     width: 96%; }  .portfolio_nav .slick-list .slick-track .slick-slide img {     width: 355px; } 

my js

$('.portfolio_wrapper').slick({     slidestoshow: 1,     slidestoscroll: 1,     arrows: false,     fade: true,     asnavfor: '.portfolio_nav' }); $('.portfolio_nav').slick({   slidestoshow: 3,   slidestoscroll: 1,   asnavfor: '.portfolio_wrapper',   centermode: true,   focusonselect: true,   arrows: false,   variablewidth: true });    // modal var modal = document.getelementbyid('mymodal');  // button opens modal var btn = document.getelementbyid("portfolio_button");  // <span> element closes modal var span = document.getelementsbyclassname("close")[0];  // when user clicks on button, open modal btn.onclick = function() {     modal.style.display = "block"; }  // when user clicks on <span> (x), close modal span.onclick = function() {     modal.style.display = "none"; }  // when user clicks anywhere outside of modal, close window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } } 

i hope made sense. if there else please let me know. tried make codepen show i'm trying don't think slick.js working on it. here codepen