Код слайдер в слайдере, возможно формирование в цикле
Последнее обновление: 23 февраля, 2022
javascript
<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>
