Large image with thumb nails under

I am very new to Webflow, please forgive my simple questions. I inherited a website that is close to be a production site.

Right now I have larger images all from a CMS collection that has a single image (thumbnail) followed with a collection of related images. When you click on the thumbnail (which is lots larger than a thumbnail) then it takes you to all the related images. It would be cool to be able to display the related images as a small thumbnail under the main picture. Attached is an example of what I mean. (borrowed the pic from Amazon) as the example.

Is this is big task to make happen?

STL_Website_Development_-_Google_Docs

I would like to suggest examining the Lightbox element.

Read this article: Is it possible to link to a specific slide in a slider?
I used on at https://www.ivamfg.com/field-sprayers/150-gallon-3-point-hitch-sprayer
If you want clear instructions let me know and Ill post it here.

Your sprayer example looks like what I am looking for. If its not too complicated I would like to give it a try. I know how to write app code and websites but really new to Webflow. If its too complicated I will just tell them it cant be easily done for now. THANK YOU!

Could you possibly post instructions to make this work? Thank you

Here are the details to to have a thumbnail image move to a specific slide.

Here is a short video explaining the setup and the code; Thumbnails for slider in Webflow

And here is the code you’ll need;

<script>
$(document).ready(function() {
  $('#Slide1-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(1)').trigger('tap');
  });
  $('#Slide2-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(2)').trigger('tap');
  });
  $('#Slide3-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(3)').trigger('tap');
  });
  $('#Slide4-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(4)').trigger('tap');
  });
  $('#Slide5-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(5)').trigger('tap');
  });
  $('#Slide6-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(6)').trigger('tap');
  });
  $('#Slide7-Thumbnail').click(function(e) {
    e.preventDefault();
    $('.hero-link').removeClass('active');
    $(this).addClass('active');
    $('.w-round div:nth-child(7)').trigger('tap');
  });
});
</script>

All the best!

THANK YOU VERY MUCH!!!

I really appreciate all the help!

Wondering if the new nested collections would work with this?