<!-- Область слайдера-->
<!-- В этом блоке будут плавать твои слайды или скрытые блоки -->
<!-- Это первый Т123 -->
<div class="tabs-slider-wrapper"></div>
<!-- Это второй Т123-->
<!-- Тут ничего не меняешь-->
<!-- Стили плагина owl carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- Скрипт плагина owl carousel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Тут вставляешь id блоков-->
<script>
$(document).ready(function() {
var block = $('#rec331251923'); //id Т123 область слайдера (тот т123 который был выше)
var wrap = $('.tabs-slider-wrapper');
var slides = $('#rec331252325, #rec331253557, #rec331255351, #rec331255438, #rec331256023, #rec331256771, #rec331257477'); // id Zero block слайдов (скрытых блоков)
//ниже ничего не меняешь
wrap.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
loop: true,
center: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
dots: false,
center: false,
nav: false,
margin: 0,
mouseDrag: false,
touchDrag: false,
autoHeight: true,
URLhashListener: true,
startPosition: 'URLHash',
responsive: {
0: {
items: 1
},
640: {
items: 1
},
1000: {
items: 1
},
}
})
});
</script>
<!-- Это третий Т123
Тут пишешь id zero блоков, которые слайды и назначаешь им ссылки.
Сейчас там стоят порядковые номера, но можешь что угодно в кавычки вписать
Потом по этой ссылке будет вызываться слайд
Ссылки будут #first или #1 или #tvoy-variant
Ссылку можешь зацепить за любую кнопку или что угодно
Пример вверху на основе меню и на основе zero
Скрытыми могут быть любые блоки, как зеро, так и обычные-->
<script>
//id блока с контентом, потом ссылка, по которой появляется блок
$("#rec331252325").attr("data-hash", "first");
$("#rec331253557").attr("data-hash", "second");
$("#rec331255351").attr("data-hash", "third");
$("#rec331255438").attr("data-hash", "fourth");
$("#rec331256023").attr("data-hash", "fifth");
$("#rec331256771").attr("data-hash", "sixth");
$("#rec331257477").attr("data-hash", "seventh");
</script>
<script>
$(document).ready(function() {
var location = window.location.href;
var active = '#' + location.split('#').pop();
$('.tb').each(function() {
var link = $(this).find('a').attr('href');
if (location != link) {
$('.tb').first().addClass('active');
}
if (active == link) {
$(this).addClass('active');
} else {
$(window).bind('hashchange', function() {
var location = window.location.href;
var active = '#' + location.split('#').pop();
$('.tb').each(function() {
var link = $(this).find('a').attr('href');
if (active == link) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
}
});
});
</script>
<!--Стиль активной кнопки-->
<style>
.tb.active .tn-atom {
background-color:#000!important;
}
</style>