I have a system of next and previous with zoom
What I want is that when I click on next or previous product change by ID from the Bank.
and zoom in on the image on the page.
because I am facing problems.
I'musingtodisplaylikethis:
<!-- /Grid-->
<section class="slider">
<div class="slide slide--current" data-content="content-<?php echo $rows_cursos['id']; ?>">
<div class="slide__mover">
<div class="zoomer flex-center">
<img class="zoomer__image" src="foto/<?php echo $rows_cursos['arquivo'] ?>" alt="" style="width:80%;height:80%;"/>
<div class="preview">
<img src="" alt="" />
<div class="zoomer__area zoomer__area--size-2"></div>
</div>
</div>
</div>
<h2 class="slide__title"><span><?php echo $rows_cursos['prod_nome'] ?></span><?php echo $rows_cursos['prod_fabricante'] ?></h2>
</div>
</section>
<!-- /Menus-->
<nav class="slider__nav">
<button class="button button--nav-prev"><i class="icon icon--arrow-left"></i><span class="text-hidden">Previous product</span></button>
<button class="button button--zoom"><i class="icon icon--zoom"></i><span class="text-hidden">View details</span></button>
<button class="button button--nav-next"><i class="icon icon--arrow-right"></i><span class="text-hidden">Next product</span></button>
</nav>
<!-- /slider-->
<section class="content">
<div class="content__item" id="content-<?php echo $rows_cursos['id']; ?>">
<img class="content__item-img rounded-right" src="foto/<?php echo $rows_cursos['arquivo'] ?>" alt="Apple Watch Content" />
<div class="content__item-inner">
<h2><?php echo $rows_cursos['prod_nome'] ?></h2>
<h3><?php echo $rows_cursos['prod_fabricante'] ?></h3>
<p><?php echo $rows_cursos['prod_desc'] ?></p>
<h3><a href="#"> <?php echo $rows_cursos['prod_preco'] ?></a></h3>
</div>
</div>
<button class="button button--close"><i class="icon icon--circle-cross"></i><span class="text-hidden">Close</span></button>
</section>