Slides in navigation (slick) are leaving, how to fix?

Question

JavaScript

I made two parallel sliders for navigation, as it should.

<div id="popup" class="popup">
    <a href="javascript:void(0)" class="popupclose">X</a>
    <div class="pojpopimagesslid">
      <div><img src="<?php echo get_template_directory_uri() ?>/img/picturebig.jpg" alt="picbig"></div>
      <div><img src="<?php echo get_template_directory_uri() ?>/img/manl.png" alt="picbig"></div>
      <div><img src="<?php echo get_template_directory_uri() ?>/img/manr.png" alt="picbig"></div>
    </div>
    <div class="pojpopimagesslidnav">
      <div><img src="<?php echo get_template_directory_uri() ?>/img/picturebig.jpg" alt="picbig"></div>
      <div><img src="<?php echo get_template_directory_uri() ?>/img/manl.png" alt="picbig"></div>
      <div><img src="<?php echo get_template_directory_uri() ?>/img/manr.png" alt="picbig"></div>
    </div>
    <p class="popuptext">текст</p>
  </div>

<script>
  $(".openprojpoplink").click(function(){
    $(".popup").show();
    $(".pojpopimagesslid").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
      asNavFor: '.pojpopimagesslidnav',
    });
    $(".pojpopimagesslidnav").slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.pojpopimagesslid',
      focusOnSelect: true,
      arrows: false,
      centerMode: true
    });
  });
  $(".popupclose").click(function(){
    $(".popup").hide();
  });
</script>

But when scrolling the top slider, which is to the right and to the left, the bottom one also goes incomprehensibly.




I need the bottom slider not to move at all, but I don’t understand how ((
If necessary, it’s all here - infovs51.beget.tech/projects

Answer 1

What worked for me was transform: none!important; for .slick-track on slider-nav.
In your case it will be

.pojpopimagesslidnav .slick-track {
  transform: none!important;
}

It's a crutch, but it works)))