<style>
[class*="v-"] {
opacity: 0;
pointer-events: none
}
[class*="v-"] .tn-atom {
pointer-events: all;
}
.act-v {
opacity: 1
}
</style>
<script>
$(function() {
var popupbtn = $('.popupbtn .tn-atom')
var vPhoto = $('.vphoto .tn-atom')
var vMap = $('.vmap .tn-atom')
var vTitle = $('.vtitle .tn-atom')
var vDescr = $('.vdescr .tn-atom')
var classValue;
var current;
$('[class*="v-"]').click(function() {
var classNames = $(this)[0].classList;
Array.from(classNames).forEach(function(className) {
if (className.indexOf('v-') !== -1) {
classValue = className.substring(2);
current = classValue
console.log(classValue);
if (current >= 7) { // Здесь меняем цифру 7 на количество ваших слайдов
current = 7; // Здесь меняем цифру 7 на количество ваших слайдов
$('.vright').css('opacity', '0.5')
} else {
$('.vright').css('opacity', '1')
}
if (current <= 1) {
current = 1;
$('.vleft').css('opacity', '0.5')
} else {
$('.vleft').css('opacity', '1')
}
}
});
$('[class*="v-"]').removeClass('act-v');
$(this).addClass('act-v');
switch (classValue) {
case '1':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild3266-3739-4135-b933-623964303461/thumbnail_00c55482-d.jpg)') // Задаем ссылку на изображение
vMap.css('background-image', 'url(https://static.tildacdn.com/tild6461-3662-4639-b866-316439373732/__2.svg)') // Задаем ссылку на карту
vTitle.text('AURORA') // Задаем текст заголовка
vDescr.html('Apartment area – 246.5 m²<br>Kitchen – 28.4 m²<br>Bathroom – 11.2 m²') // Задаем текст описания
popupbtn.attr('href','#1') // Вместо #1 пишем ссылку для кнопки
break;
case '2':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild6433-6665-4436-b665-353430336633/thumbnail_b8166acc-e.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild6530-6334-4161-b836-636535666138/__1.svg)')
vTitle.text(`NOAH`)
vDescr.html(`Apartment area – 235.9 m²<br>Kitchen – 26.7 m²<br>Bathroom – 10.4 m²`)
popupbtn.attr('href','#2')
break;
case '3':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild6132-3930-4338-b261-666630376232/thumbnail_3c73912f-1.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild3331-3766-4632-b733-326563363963/__3.svg)')
vTitle.text(`ISLA`)
vDescr.html(`Apartment area – 221.3 m²<br>Kitchen – 24.9 m²<br>Bathroom – 9.7 m²`)
popupbtn.attr('href','#3')
break;
case '4':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild6364-3736-4163-b537-316461356236/thumbnail_7d0d8761-7.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild6234-3365-4530-b366-363965376534/__4.svg)')
vTitle.text('LEO')
vDescr.html('Apartment area – 354.3 m²<br>Kitchen – 31.2 m²<br>Bathroom – 14.6 m²')
popupbtn.attr('href','#4')
break;
case '5':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild3437-6433-4238-b338-626137313566/thumbnail_5bf0fa01-5.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild6335-3261-4630-b337-623362663236/__5.svg)')
vTitle.text(`AVA`)
vDescr.html(`Apartment area – 263.5 m²<br>Kitchen – 22.1 m²<br>Bathroom – 10.1 m²`)
popupbtn.attr('href','#5')
break;
case '6':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild3235-3565-4064-b036-663930356361/thumbnail_629a532e-e.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild6561-3066-4861-b863-626464396531/__6.svg)')
vTitle.text(`LUCAS`)
vDescr.html(`Apartment area – 279.6 m²<br>Kitchen – 25.3 m²<br>Bathroom – 12.0 m²`)
popupbtn.attr('href','#6')
break;
case '7':
vPhoto.css('background-image', 'url(https://static.tildacdn.com/tild6539-3534-4438-a533-333566356231/thumbnail_90d57bae-8.jpg)')
vMap.css('background-image', 'url(https://static.tildacdn.com/tild3533-6664-4438-b434-643936366638/__7.svg)')
vTitle.text('MILA')
vDescr.html('Apartment area – 243.0 m²<br>Kitchen – 21.6 m²<br>Bathroom – 9.8 m²')
popupbtn.attr('href','#7')
break;
default:
break;
}
})
$('.v-1').click();
var current = classValue;
$('.vright').click(function() {
current++;
console.log(current);
if (current >= 7) { // Здесь меняем цифру 7 на количество ваших слайдов
current = 7; // Здесь меняем цифру 7 на количество ваших слайдов
$('.vright').css('opacity', '0.5')
} else {
$('.vright').css('opacity', '1')
}
$(`.v-${current}`).click();
})
$('.vleft').click(function() {
current--;
if (current <= 1) {
current = 1;
$('.vleft').css('opacity', '0.5')
} else {
$('.vleft').css('opacity', '1')
}
$(`.v-${current}`).click();
})
$('[class*="v-"]').mouseenter(function() {
$(this).click()
})
})
</script>