Slick slider blinks at the end of the rotation for reapeating

Question

I faced an issue with slick slider https://kenwheeler.github.io/slick/, I used slick slider to create this slider , this slider has 6 slide. The problem is that when you want to move from slide 6 to slide 1 it has a blink, and again for moving from slide 6 to slide one it has another blink.

I want to fix this blink. See this video to watch how it works and what I mean exactly.

https://i.sstatic.net/mZZlO.jpg

this is the library that I used

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="Scripts/jquery-3.6.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/plugins.js"></script>

This is the html

 <div id="screenshot-area" class="screenshot-area bg-white section-padding">
    <div class="container">
        <div class="row">
            <!-- Section Title -->
            <div class="section-title text-center col-xs-12">
                <h4 >SCREENSHOT</h4>
                <span class="borderbottomblue"></span>
                <p>
                    
                </p>
            </div>
            <!-- Screen Shot Slider -->
            <div class="col-xs-12">
                <div class="screenshot-slider">
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_1.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_2.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_3.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_4.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                    <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_5.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                     <div class="single-screen"><img src="Content/img/screenshot/Meinu_screen_1.png" alt="Mein_Übersetzer iPhone screenshot" /></div>
                        
                         
                         
                        
                    
                </div>
            </div>
        </div>
    </div>
</div>

This is the Javascript:

<script type="text/javascript">

    

$('.screenshot-slider').slick({

    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    focusOnSelect: true,
    centerPadding: '228px',
    responsive: [
      {
          breakpoint: 1250,
          settings: {
              arrows: false,
              centerPadding: '230px',
          }
      },
      
       {
          breakpoint: 1200,
          settings: {
              arrows: false,
              centerPadding: '175px',
             
          }
      },
      
      
      {
          breakpoint: 992,
          settings: {
              arrows: false,
              centerPadding: '0px',
              slidesToShow: 3,
          }
      },
      //{
      //  breakpoint: 769,
      //  settings: {
      //    arrows: false,
      //    centerPadding: '0px',
      //  }
      //},
      {
          breakpoint: 769,
          settings: {
              arrows: false,
              centerPadding: '0px',
              dots: true,
              slidesToShow: 3,
          }
      },
         {
             breakpoint: 768,
             settings: {
                 arrows: false,
                 centerPadding: '0px',
                 dots: true,
                 slidesToShow: 2,
             }
         },
      {
          breakpoint: 480,
          settings: {
              arrows: false,
              centerPadding: '0px',
              dots: true,
              slidesToShow: 1,
          }
      },
    ]
});

</script>

I think it relates to the way it chooses the active and current slides , seems the calculation needs more time for this.

Update

I found this bunch of CSS might cause this problem because as I remove this bunch of code, the current slide won't be bigger while active but the blink won't happen.

.screenshot-area{}
.screenshot-slider {}
.screenshot-slider .slick-list {
  padding-bottom: 60px !important;
  padding-top: 60px !important;
}
.single-screen {
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.single-screen.slick-active {
  -webkit-transform: scale(1.15);
      -ms-transform: scale(1.15);
          transform: scale(1.15);
  z-index: 2;
}
.single-screen.slick-center {
  position: relative;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
  z-index: 3;
}
.single-screen img {
  width: 100%;
}

How can I fix this problem?

Answer 1

To fix this issue 1- change the version of slick:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

2- update the style

.slick-slide {
            z-index: 1;
            -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
            }
            .slick-slide.slick-center {
            -webkit-transform: scale(1.3);
                -ms-transform: scale(1.3);
                    transform: scale(1.3);
                    z-index: 3;
            position: relative;

            }

            .screenshot-slider {
            margin: 0 auto;
            position: relative;
            } 

            .single-screen {
            padding: 0;
            z-index: 1;
            -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
            }
            .single-screen img {
            width: 100%;
            }

3- add this script after $('.screenshot-slider').slick();

 $('.slick-slide').click(function(e){
            e.currentTarget.classList.add('slick-current', 'slick-active','slick-center');
        });