如何放大当前光滑幻灯片的图像？

Question

我已经跟随@mkbctrl的https://jsfiddle.net/mkbctrll/aq9Laaew/300936/并设法创建了一个光滑的滑块，但是我想放大当前幻灯片的图像。我该如何实现？

我尝试过使用photowipe，但不起作用。我尝试使用其示例，但仍然不起作用。其他方法仅具有临时放大功能，这意味着单击鼠标悬停时，图像会放大，但会随鼠标。我不希望这样。我希望实现的功能与CSS Zoom相同。

//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) => {
    const $target = $(target);

    switch (true) {
        case $target.hasClass('slick-initialized'):
            $target.slick('unslick');
            $target.slick(settings);
            break;
        default:
            $target.slick(settings);
    }
};
const handleInputChange = (event) => {
    console.log('We are handling it sir!');
    const filesArray = Array.from(event.target.files);
    if (filesArray.length > 20) {
        alert("Please select 20 or less images!!");
    } else {
        filesArray.map((singleFile) => {
            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) => {
                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 < files.length; i++) {
            $("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
        }
        if ($(".imageContainer").hasClass("slick-initialized")) {

            $('.imageContainer').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
                $(".imageContainer").slick('slickSetOption', 'adaptiveHeight', true, true);
            });

        }

        initSlickCarousel(fileList, slickSettings);

    }

};

当我单击放大按钮时，当前显示的图像应放大。该怎么办？

更新：

我已经设法通过评论建议进行缩放，但是它没有显示完整图像，这是因为我将滑块的容器的宽度和高度都设置为200px，我应该如何使容器响应当前显示的图像？如果我将宽度设置为自动，它将显示幻灯片中的所有图像。