Вставляю два кода на страницу на один zero-block.
По отдельности, они работают нормально, но если я включаю оба, то код со слайдером глючит и резко обнуляет весь блок.
Прикладываю ссылку на сайт и оба кода.
project2319498.tilda.ws
Для смены меню бокового:
.posAnsld{
position : absolute;
width:100%;
top:0;
}
.outAnth{
opacity:0;
z-index:-1;
}
.piecezeroslides{transition:all 1.0s ease-in-out}
.allzeroslides{ position: relative}
.paginbtn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
$( document ).ready(function() {
//ID Zero
var sbZero = [
'#rec180549015',
'#rec180552771',
'#rec180553108',
'#rec180553207',
'#rec180553303',
'#rec180553892',
'#rec180554107',
'#rec180554471',
];
//Добавляем классы к блокам
$.each(sbZero, function(index,value) {
$(sbZero[index]).addClass('piecezeroslides');
});
$('.piecezeroslides:not(:first)').addClass('outAnth posAnsld');
//Добавляем общие классы
$('.piecezeroslides').wrapAll('<div class="allzeroslides"></div>');
//Присваиваем класс нашим кнопкам
$('a[href^="#slide"]').addClass("paginbtn");
//При клике на кнопку
$('.paginbtn').click(function(e) {e.preventDefault();
var btnNum = Number.parseInt( $(this).attr('href').substring(6));
$('.piecezeroslides').addClass('outAnth');
$(sbZero[btnNum-1]).removeClass('outAnth');
});
});
Слайдеры:
(function () {
// Id блока, в котором будет слайдер
var block = $("#rec180549015");
// Class элемента, в котором будет находиться слайдер
var wrap = $(".tn-elem__1805490151587405066844");
// Id блоков, которые будут слайдами
var slides = $("#rec182807625, #rec182808102, #rec182837945");
wrap.addClass("tildoshnaya-slider-owl");
var box = wrap.find(".tn-atom");
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
// Зациклить слайдер - true
// Без зацикленности - false
loop: true,
// Точки-контроллы
dots: false,
nav:false,
// Колличество карточек
items: 1,
// Адаптивность
responsive:{
// 0 это минимальная ширина экрана, при которой включается следующая часть кода
// 0:{
// items: 1 это колличество слайдов на экране
// items:1
// },
0:{
items:1
},
0:{
items:1
},
0:{
items:1
},
}
// Адаптивность: конец
})
block.find("[href='#slider_left']").click(function(e){
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#slider_right']").click(function(e){
e.preventDefault();
owl.trigger('next.owl.carousel');
})
}());
/* tildoshnaya_ */
.tildoshnaya-slider-owl .t-rec .t396__artboard {
/* Указываем высоту слайда */
height: 850px !important;
/* Указываем ширину слайда */
width: 650px !important;
}
.tildoshnaya-slider-owl {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}
.tildoshnaya-slider-owl .t-rec,
.tildoshnaya-slider-owl .t396__artboard {
overflow: hidden !important;
}
