<div class="product-main-image">
{% for media in product.media %}
<div
onmousemove="zoom(event)"
style="background-image: url({{ media |img_url: '' }})"
data-src="{{ media |img_url: '' }}"
class="zoom item-slick {{ media.alt | replace: '/', ''}}"
>
<img
class="item-slick {{ media.alt | replace: '/', ''}}"
src="{{ media |img_url: '' }}"
alt="{{ media.alt }}"
>
</div>
{% endfor %}
</div>

<div class="product-thumb">
{% for media in product.media %}
<div class="item-slick {{ media.alt | replace: '/', ''}}">
<img
src="{{ media |img_url: '' }}"
alt="{{ media.alt }}"
>
</div>
{% endfor %}
</div>

<style>

div.zoom {
& img:hover {
opacity: 0 !important;
}
img {
transition: opacity .5s !important;
display: block !important;
width: 100% !important;
}
background-position: 50% 50% !important;
position: relative !important;
overflow: hidden !important;
cursor: zoom-in !important;
}
</style>

<script>

function zoom(e){
var zoomer = e.currentTarget;
e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
x = offsetX/zoomer.offsetWidth*100
y = offsetY/zoomer.offsetHeight*100
zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

$('.product-main-image').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
prevArrow: '<div class="slick-prev slick-arrow"><svg width="30" height="30" viewBox="0 0 26 45" fill="none" xmlns="https://static.barilliance.com/img/common/prev.svg"><path d="M24.8182 44L0 22.4995L25 1" stroke="#231F20" stroke-width="1.2"></path></svg></div>',
nextArrow: '<div class="slick-next slick-arrow"><svg width="30" height="30" viewBox="0 0 26 45" fill="none" xmlns="https://static.barilliance.com/img/common/next.svg"><path d="M1.18084 1L26 22.4995L1 44" stroke="#231F20" stroke-width="1.2"></path></svg></div>',
fade: false,
asNavFor: '.product-thumb',
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
}
]
});
$('.product-thumb').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.product-main-image',
dots: false,
focusOnSelect: true,
vertical:true,
prevArrow: '<div class="slick-prev slick-arrow"><svg width="30" height="30" viewBox="0 0 26 45" fill="none" xmlns="https://static.barilliance.com/img/common/prev.svg"><path d="M24.8182 44L0 22.4995L25 1" stroke="#231F20" stroke-width="1.2"></path></svg></div>',
nextArrow: '<div class="slick-next slick-arrow"><svg width="30" height="30" viewBox="0 0 26 45" fill="none" xmlns="https://static.barilliance.com/img/common/next.svg"><path d="M1.18084 1L26 22.4995L1 44" stroke="#231F20" stroke-width="1.2"></path></svg></div>',
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true
}
}
]
});

</script>

Demo url: Floral Print Lace Up Crop Top & Shirred Skirt Set | Co-ords | Rebellious Fashion – SheOnlyWears