I used the W3 Tutorial to make an image Magnifying Glass https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp
I use Bootstrap and I created a carousel.
The Magnifying effect works perfectly on the first slide.
When I change the slide I still see my cursor and the zoom option changes: zoom in and show me a different part of the photo and not the exact point where my cursor is.
This is the code of the carousel (for the moment only the first 2 slides are set with the magnifying effect)
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
<li data-target="#carouselExampleFade" data-slide-to="3"></li>
<li data-target="#carouselExampleFade" data-slide-to="4"></li>
<li data-target="#carouselExampleFade" data-slide-to="5"></li>
<li data-target="#carouselExampleFade" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="img-magnifier-container">
<img id="myimage" src="carousel/01.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-item ">
<div class="img-magnifier-container">
<img id="myimage2" src="carousel/02.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-item">
<img src="carousel/03.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/04.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/05.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/06.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="carousel/07.png" class="d-block w-100" alt="...">
</div>
</div>
</div>
<script>
magnify("myimage", 3);
</script>
<script>
magnify("myimage2", 3);
</script>
