Good evening! Maybe someone has similar tabs with a carousel (I don’t know how to call it correctly) Example: enter image description here

I will be very grateful!)

Closed due to the fact that the issue is too general for participants Vadim Ovchinnikov , Air , Viktor Tomilov , cheops , 0xdb 25 Feb '18 at 0:05 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • kenwheeler.imtqy.com/slick - Slider Syncing - kizoso
  • @kizoso, it's more customPaging. - zhurof
  • @GennadiyZhurov yes, also suitable - kizoso

1 answer 1

$(document).ready(function(){ $('.slider').slick({ slidesToShow:3, arrows:false, dots:true, focusOnSelect:true, centerMode:true, variableWidth:true, customPaging: function(slider, i) { return $(slider.$slides[i]).find('.slide__title').text(); } }); }); $('.slider').on('init reInit', function(){ $(this).find('.slick-dots').prependTo(this); }); 
 .slide{ background-color:#ddd; padding:10px; margin:10px; } .slick-dots .slick-active{ font-weight:bold; } .slide.slick-current{ color:red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <div class="slider"> <div class="slide"> <h5 class="slide__title">Заголовок1</h5> </div> <div class="slide"> <h5 class="slide__title">Заголовок2</h5> </div> <div class="slide"> <h5 class="slide__title">Заголовок3</h5> </div> <div class="slide"> <h5 class="slide__title">Заголовок4</h5> </div> <div class="slide"> <h5 class="slide__title">Заголовок5</h5> </div> </div>

  • one
    centerMode: true, variableWidth: true - HamSter
  • one
    @HamSter, yes. I just wanted to show the basic principle of "tabs". Editing made. - zhurof
  • HUGE THANKS TO YOU! THANK YOU!) - Vladislav Chaly
  • Another question arose along the way. How to navigate the slider to do? - Vladislav Chaly
  • @Vladislav Chaly, edited back. Although, perhaps, this is not the most elegant solution. - zhurof