How to make fancybox slider with main image?

Question

JavaScript

Hello. Faced a problem.
I have this output. (see image)

There is a main picture and 2 or more smaller ones.
I need to implement the following algorithm:
1.when a small img is clicked, the Big img changes to the clicked image.
There are no problems here, I pull up src by attribute.
2. When I clicked on the Big IMG, I got a fantasybox with a gallery.
That is, if I have 2 small img, then I could flip through.
But by hanging a fantasybox on BIG IMG, he makes a fantasybox 1 image.

Here it is necessary to somehow integrate rel='group' , but I have no idea how to do it correctly.

<div class="main-img">
                <a class="fancybox"    href="big-img.png">
                    <img  src="small-img.png" alt="">
                </a>
            </div>
            <div class="catalog-element__gallery gallery">
                                 <a class="fancybox"    href="big-img.png">
                    <img  src="small-img.png" alt="">
                </a>
                 <a class="fancybox"    href="big-img2.png">
                    <img  src="small-img2.png" alt="">
                </a>                   
            </div>