Slideshow knowhow

Hi, All.

I'm working on transferring a client's CMSB site from an old template to a new, responsive one. There's a slideshow on the left of the product pages, which looks like this: http://www.masselsmarine.com/2017/marineBoatsDetail0.php.

This is the slideshow code on the page:

<ul id="product-slider" class="product-item-slider product-image">

<li class="item hoverStyle" data-thumb="images/151AllSport.jpg" valign="middle">
<img src="images/151AllSport.jpg">
</li>

<li class="item hoverStyle" data-thumb="images/16XterminatorD_001.jpg" valign="middle">
<img src="images/16XterminatorD_001.jpg">
</li>

<li class="item hoverStyle" data-thumb="images/16-proSport-SC-OVERHEAD.jpg" valign="middle">
<img src="images/16-proSport-SC-OVERHEAD.jpg">
</li>

etc...

</ul>

And this is the image code generated by CMSB:

<?php foreach ($marineRecord['gallery'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><br/>
<?php elseif ($upload['isImage']): ?>
<img src="<?php echo $upload['urlPath'] ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="" /><br/>
<?php else: ?>
<a href="<?php echo $upload['urlPath'] ?>">Download <?php echo $upload['filename'] ?></a><br/>
<?php endif ?>
<?php endforeach ?>

Can someone push me in the right direction to integrate the two, please?