Responsive gallery using slick.js and fancybox 3

Question

I wanted to make 2images in a row grid like in the link below https://codepen.io/EwelinaWoloszyn/pen/KKdGYdQ

with zoom function so I added this script https://codepen.io/EwelinaWoloszyn/pen/VweZzMK.

$(function() {
  "use strict"; 

 $(".slick").slick({

    infinite: false,
    slidesToShow: 6,
    slidesToScroll: 3,
    nextArrow:
      '<span  slick-gallery-btn" class="slick-next"><i class="fa fa-chevron-right" aria-hidden="true"></span>',
    prevArrow:
      '<span  slick-gallery-btn" class="slick-prev"><i class="fa fa-chevron-left" aria-hidden="true"></span>',
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 6,
          slidesToScroll: 6
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }
    ]
  });

  $('[data-fancybox="gallery"]').fancybox({
    buttons: ["close"],
    hash: !1,
    arrows: !0,
    btnTpl: {
      arrowLeft:
        '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>',
      arrowRight:
        '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
    }
  });

});



    $(document).ready(function() {

        // Create the dropdown bases
        $("<select />").appendTo(".navigation nav");

        // Create default option "Go to..."
        $("<option />", {
           "selected": "selected",
           "value"   : "",
           "text"    : "Wybierz..."
        }).appendTo("nav select");


        // Populate dropdowns with the first menu items
        $(".navigation ul a li").each(function() {
          var el = $(this);
          $("<option />", {
              "value"   : el.attr("href"),
              "text"    : el.text()
          }).appendTo("nav select");
        });

        //make responsive dropdown menu actually work     
            $("nav select").change(function() {
              window.location = $(this).find("option:selected").val();
            });

    });

It seems to change my initial layout. I'm a js beginner so not sure how to adjust the script.

Any suggestions more than welcome, Neko