fancybox wrong image quantity with slick slider

Question

I'm using fancybox to display image gallery.

I have this layout:

    <div class="avatar">
        <a class="avatar-item" data-fancybox="group" data-caption="Caption #1" href="img/avatars/jessica1.jpeg">
            <img src="./img/avatars/jessica1.jpeg" width="145" height="145" alt="">
        </a>
        <a class="avatar-item" data-fancybox="group" data-caption="Caption #2" href="img/avatars/jessica2.jpeg">
            <img src="./img/avatars/jessica2.jpeg" alt="">
        </a>
    </div>

And when I click on preview - gallery popup occurs, but it shows 4 images instead of 2. I included fancybox via data-attributes, without javascript. Tried magnific popup with gallery option - got same result. link href attribute value and internal image src attribute are the same. I don't have a thumbnail, display image cropped with css.

Hee is CSS:

.avatar {
    &.slick-dotted.slick-slider {
        margin-bottom: 0;
    }
    a.avatar-item {
        width: 146px;
        height: 146px;
        display: inline-block;
    }
    width: 146px;
    height: 146px;
    border: 4px solid #FFF;
    float: left;
    position: relative;
    overflow: hidden;
    img {
        height: 100%;
    }
}

Answer 1

Found the problem. I use slick-slider before with infinite: true parameter, which creates an extra slides, so I got count slides x2