Код слайдер в слайдере, возможно формирование в цикле
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.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> <script> $(document).ready(function(){ $('.activities_slider').slick({ }); $('.services_slider_1').slick({ }); $('.services_slider_2').slick({ }); $('.services_slider_3').slick({ }); $('a[data-activities]').click(function(e) { e.preventDefault(); var slideno = $(this).data('activities'); $('.activities_slider').slick('slickGoTo', slideno - 1); }); $('a[data-services-1]').click(function(e) { e.preventDefault(); var slideno = $(this).data('services-1'); $('.services_slider_1').slick('slickGoTo', slideno - 1); }); $('a[data-services-2]').click(function(e) { e.preventDefault(); var slideno = $(this).data('services-2'); $('.services_slider_2').slick('slickGoTo', slideno - 1); }); $('a[data-services-3]').click(function(e) { e.preventDefault(); var slideno = $(this).data('services-3'); $('.services_slider_3').slick('slickGoTo', slideno - 1); }); }); </script> </head> <body> <div class="div_table"> <div class="div_table_column"> <div class="activities_slider_pager"> <a class="" data-activities="1" href="" onclick="return false;"> Направление 1</a> <a class="" data-activities="2" href="" onclick="return false;"> Направление 2</a> <a class="" data-activities="3" href="" onclick="return false;"> Направление 3</a> </div> </div> <div class="div_table_column"> <div class="activities_slider"> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider_1"> <div class="services_slide"> 1.1 lorem ipsum </div> <div class="services_slide"> 1.2 lorem ipsum </div> <div class="services_slide"> 1.3 lorem ipsum </div> <div class="services_slide"> 1.4 lorem ipsum </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_1_pager"> <div class="services_slider_pager"> <a class="" data-services-1="1" href="" onclick="return false;"> Направление 1</a> <a class="" data-services-1="2" href="" onclick="return false;"> Направление 2</a> <a class="" data-services-1="3" href="" onclick="return false;"> Направление 3</a> <a class="" data-services-1="4" href="" onclick="return false;"> Направление 4</a> </div> </div> </div> </div> </div> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider_2"> <div class="services_slide"> 2.1 </div> <div class="services_slide"> 2.2 </div> <div class="services_slide"> 2.3 </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_1_pager"> <div class="services_slider_pager"> <a class="" data-services-2="1" href="" onclick="return false;"> Направление 1</a> <a class="" data-services-2="2" href="" onclick="return false;"> Направление 2</a> <a class="" data-services-2="3" href="" onclick="return false;"> Направление 3</a> </div> </div> </div> </div> </div> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider_3"> <div class="services_slide"> 3.1 </div> <div class="services_slide"> 3.2 </div> <div class="services_slide"> 3.3 </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_1_pager"> <div class="services_slider_pager"> <a class="" data-services-3="1" href="" onclick="return false;"> Направление 1</a> <a class="" data-services-3="2" href="" onclick="return false;"> Направление 2</a> <a class="" data-services-3="3" href="" onclick="return false;"> Направление 3</a> </div> </div> </div> </div> </div> </div> </div> </div> <style> .div_table { display: table; } .div_table_column { display: table-cell; border: 1px solid black; } .activities_slider { width: 600px; height: 200px; } .activities_slide { width: 600px; height: 200px; } .services_slider_1, .services_slider_2, .services_slider_3, .services_slider { width: 300px; height: 200px; } .services_slide { width: 300px; height: 200px; } </style> </body> </html> <?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. * * * <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.activities_slider').bxSlider({ pagerCustom: '.activities_slider_pager', } ); $('.services_slider').bxSlider({ maxSlides : 1 } ); }); </script> </head> <body> <div class="div_table"> <div class="div_table_column"> <div class="activities_slider_pager"> <a class="" data-slide="0" href="" onclick="return false;"> Направление 1</a> <a class="" data-slide="1" href="" onclick="return false;"> Направление 2</a> <a class="" data-slide="2" href="" onclick="return false;"> Направление 3</a> </div> </div> <div class="div_table_column"> <div class="activities_slider"> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider"> <div class="services_slide"> 1.1 lorem ipsum </div> <div class="services_slide"> 1.2 lorem ipsum </div> <div class="services_slide"> 1.3 lorem ipsum </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_1_pager"> <div class="activities_slider_pager"> <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a> <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a> <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a> </div> </div> </div> </div> </div> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider"> <div class="services_slide"> 2.1 </div> <div class="services_slide"> 2.2 </div> <div class="services_slide"> 2.3 </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_2_pager"> <div class="activities_slider_pager"> <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a> <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a> <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a> </div> </div> </div> </div> </div> <div class="activities_slide"> <div class="div_table"> <div class="div_table_column"> <div class="services_slider"> <div class="services_slide"> 3.1 </div> <div class="services_slide"> 3.2 </div> <div class="services_slide"> 3.3 </div> </div> </div> <div class="div_table_column"> <div class="activities_slide_3_pager"> <div class="activities_slider_pager"> <a class="" data-slide="0" href="" onclick="return false;"> Услуга 1</a> <a class="" data-slide="1" href="" onclick="return false;"> Услуга 2</a> <a class="" data-slide="2" href="" onclick="return false;"> Услуга 3</a> </div> </div> </div> </div> </div> </div> </div> </div> <style> .div_table { display: table; } .div_table_column { display: table-cell; } .activities_slider { width: 600px; height: 200px; } .activities_slide { width: 600px; height: 200px; } .services_slider { width: 300px; height: 200px; } .services_slide { width: 300px; height: 200px; } </style> </body> </html>