When you add a centerMode: true field, slides appear that are half hidden, but in the absence of this field they are not. The problem is that I need 3 visible fields to be active, and when adding centerMode: true, only the middle active, how can this be corrected?

$('.center').slick({ centerPadding: '60px', slidesToShow: 3, responsive: [{ breakpoint: 768, settings: { centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { centerPadding: '40px', slidesToShow: 1 } } ] }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="center" style="padding-left:10px;padding-right:10px;"> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>6</center> </div> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>5</center> </div> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>4</center> </div> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>3</center> </div> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>2</center> </div> <div style="width:90%;margin-left:1vh;margin-right:1vh;"> <center>1</center> </div> </div>

  • one
    Please specify your question: provide more details, screenshots with explanations, code (preferably with the content that will eventually be or analog). I did not understand you to help you in your question. - Vladimir Rodichev pm

1 answer 1

And what does "active only average" mean?

 $('.center').slick({ slidesToShow: 3, slidesToScroll: 1, centerMode: true }); 
 body { background-color: gray; } .center { border: 1px solid black; margin: 25px; } .center center { padding: 15px; } .one { background-color: red; } .two { background-color: green; } .three { background-color: blue; } .four { background-color: maroon; } .five { background-color: yellow; } .six { background-color: pink; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="https://kenwheeler.imtqy.com/slick/slick/slick-theme.css"> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <div class="center"> <div class="six"> <center>6</center> </div> <div class="five"> <center>5</center> </div> <div class="four"> <center>4</center> </div> <div class="three"> <center>3</center> </div> <div class="two"> <center>2</center> </div> <div class="one"> <center>1</center> </div> </div>

  • Help please with my new question - Alexander
  • @Alexander, everything works there - humster_spb