It is not clear how the slick slider works, what could be the reason?

Question

JavaScript

Hello.
On the site, for reasons I do not understand, the slick slider lives its own life ....

For example , here it is not clear why it initially creates transform: translate3d(88px, 0px, 0px);..

And here is the same trouble, only there are 5 photos, but only 4 are shown ! and all again because of the same problem, I look at the source code of the element - in it translate3d (88px, 0px, 0px);
BUT AND ALSO:


Some kind of horseradish classes are added to both the first and last photo when the page is loaded, although there should be ONLY ONE photo in the center and active.

Config:

$('ul.bimgs').slick({
    slidesToShow: 1,
    slidesToScroll: 1, 
    arrows: false,
    dots: false,
    fade: true,
    adaptiveHeight: true,
    asNavFor: 'ul.mimgs'
  });
  
  $('ul.mimgs').slick({
    slidesToShow: 5,
    slidesToScroll: 5,
    asNavFor: 'ul.bimgs',
    dots: true,
    arrows: false,
    centerPadding: '0px',
    centerMode: true,
    focusOnSelect: true,
    swipeToSlide: true,
    responsive: [
      {
        breakpoint: 620,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          arrows: false,
          dots: true,
        }
      }
    ]
  });

Please help me solve this issue...

Answer 1

make infinite: true