Can this be used on multiple images?

[Davidoff80]

I am trying to use this script in Slickslider, but it doesn't seem to work correctly on multiple images using the same classname. Any suggestions?

import ImageZoom from "js-image-zoom";

export default class Jsimagezoom {
    constructor(el, options) {
        let _c = options || {
            width: 400,
            zoomWidth: 500,
            offset: { vertical: 0, horizontal: 10 }
        };
        

        let slides = document.getElementsByClassName("singleproduct");

        for (var i = 0; i < slides.length; i++) {
            new ImageZoom(slides[i], _c);
        }

     
    }
}

[notrealdev]

same issue here, i want apply this for my slider

[notrealdev]

Demo here:
https://jsbin.com/loxomivoci/edit?html,js,output

[rubylnic]

You shouldn't use for loop, use event.target instead, worked fine for me

My code:

var slider = document.querySelector('.product-slider__big');

    var options = {
        zoomPosition: 'original',
        scale: 1
    };
    function zoom(evt) {
        if(evt.target.parentNode.parentNode.classList.contains("slick-current")) {
            new ImageZoom(evt.target.parentNode.parentNode, options);
        }
    }
    slider.addEventListener('mouseover', zoom);

[PavelAratin]

When using several images, the class '.js-image-zoom__zoomed-area' is not assigned the left position, how can I fix it?