title: How to zoom in on image of current slick slide?
body: <p>I have followed <a href="https://jsfiddle.net/mkbctrll/aq9Laaew/300936/" rel="nofollow noreferrer">https://jsfiddle.net/mkbctrll/aq9Laaew/300936/</a> from @mkbctrl and managed to create a slick slider but i want to zoom in on the image of the current slide.How do i implement this?</p>
  
  <p>I tried using photoswipe but it doesn't work.I tried using their example but it still did not work.Other methods only have zoom in temporarily meaning when is on hover on click,the image is zoomed but it moves around with the mouse.I do not want this.What i hope to achieve is the same as CSS Zoom.</p>
  
  <pre><code>//view selected images
  const fileInput = document.getElementById('my_file');
  const fileList = document.getElementById('imageContainer');
  let slickSettings = {
      infinite: true,
      draggable: false,
      arrows: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      swipe: false
  };
  let initSlickCarousel = (target, settings) =&gt; {
      const $target = $(target);
  
      switch (true) {
          case $target.hasClass('slick-initialized'):
              $target.slick('unslick');
              $target.slick(settings);
              break;
          default:
              $target.slick(settings);
      }
  };
  const handleInputChange = (event) =&gt; {
      console.log('We are handling it sir!');
      const filesArray = Array.from(event.target.files);
      if (filesArray.length &gt; 20) {
          alert("Please select 20 or less images!!");
      } else {
          filesArray.map((singleFile) =&gt; {
              const outputImg = document.createElement('img');
              const fileReader = new FileReader();
  
              outputImg.className = 'img-thumbnail';
  
              // Let's read it as data url - onload won't return a thing without it
              fileReader.readAsDataURL(singleFile);
  
              fileReader.onload = (event) =&gt; {
                  outputImg.src = event.target.result;
  
              };
  
              console.log(outputImg);
              console.log(event.target.files);
              fileList.appendChild(outputImg);
              document.getElementById("openBtn").style.pointerEvents = "none";
  
          });
          var files = event.target.files;
          for (var i = 0; i &lt; files.length; i++) {
              $("#files").append('&lt;div class="filename"&gt;&lt;span name="fileNameList"&gt;' + files[i].name + '&lt;/span&gt;&lt;/div&gt;');
          }
          if ($(".imageContainer").hasClass("slick-initialized")) {
  
              $('.imageContainer').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                  $(".imageContainer").slick('slickSetOption', 'adaptiveHeight', true, true);
              });
  
          }
  
          initSlickCarousel(fileList, slickSettings);
  
      }
  
  };
  </code></pre>
  
  <p>When I click on a zoom in button,my image that is currently displayed should zoom in.What should I do to achieve this?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have managed to do the zoom by a comment recommendation but it doesnt show the full image.This is because i set the container for my slider to 200px for both width and height.How should I make the container responsive to the currently displayed image?If i set the width to auto,it will display all the images in the slides.</p>