На сайте
cultprosvet.com.tilda.ws есть слайдер (до/после). В firefox все работает нормально. В Chrome, при нажатии на 2 или 3 слайд, картинка уменьшается сильно. Сайт сделан на тильде
В чем может быть проблема?
Код прилагается
<script>
$( document ).ready(function() {
//Прописываем наши ID ZeroBlockov
var myzero_1 = '#rec116127733';
var myzero_2 = '#rec116136108';
var myzero_3 = '#rec116136129';
//Скрываем лишние блоки, кроме первого
$(myzero_1).addClass('piecezeroslides');
$(myzero_2).hide().addClass('piecezeroslides');
$(myzero_3).hide().addClass('piecezeroslides');
//Добавляем общие классы
$('.piecezeroslides').wrapAll('<div class="allzeroslides"></div>');
//Присваиваем класс нашим кнопкам
$('[href = "#slide1"]').addClass("paginbtn mode1 activepaginbtn");
$('[href = "#slide2"]').addClass("paginbtn mode2");
$('[href = "#slide3"]').addClass("paginbtn mode3");
//Функция скрытия блоков
function slideUpzero(){
$(myzero_1).fadeOut(1800);
$(myzero_2).fadeOut(1800);
$(myzero_3).fadeOut(1800);
};
//При клике на кнопку 1
$( ".mode1" ).click(function() {
//Запускаем функцию скрытия блоков если кнопка не выделена
if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}
//Снимаем все классы активных кнопок
$(".paginbtn").removeClass("activepaginbtn");
//Добавляем к нажатой состояние активности
$(".mode1").addClass("activepaginbtn");
//Показываем нужный блок
$(myzero_1).fadeIn(1800);
t396_init('116127733'); return false;
});
//При клике на кнопку 2
$( ".mode2" ).click(function() {
//Запускаем функцию скрытия блоков если кнопка не выделена
if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}
//Снимаем все классы активных кнопок
$(".paginbtn").removeClass("activepaginbtn");
//Добавляем к нажатой состояние активности
$(".mode2").addClass("activepaginbtn");
//Показываем нужный блок
$(myzero_2).fadeIn(1800);
t396_init('116136108'); return false;
});
//При клике на кнопку 3
$( ".mode3" ).click(function() {
//Запускаем функцию скрытия блоков если кнопка не выделена
if(!$(this).hasClass('activepaginbtn')){ slideUpzero();}
//Снимаем все классы активных кнопок
$(".paginbtn").removeClass("activepaginbtn");
//Добавляем к нажатой состояние активности
$(".mode3").addClass("activepaginbtn");
//Показываем нужный блок
$(myzero_3).fadeIn(1800);
t396_init('116136129'); return false;
});
});
</script>
Ну и стили для нее:
<style>
/*Класс для активной кнопки*/
.activepaginbtn {
background-color: #ffffff !important;
border-color: #ffffff !important;
color: #000000 !important;
}
.piecezeroslides{
position : absolute;
width:100%;
}
.allzeroslides{
height:803px;
}
</style>
Стоить заметить, что в фото в слайдере отображается через фрэйм.
