Слайдер с переключателями при наведении

Модификация позволяет добавить слайдер, который реагирует на триггерные объекты для переключения слайдов

jQuery
Для корректной работы блоков подключите библиотеку jQuery:
Инструкция с подключением кода
Всем добавленным элементам задаем первоначальные значения:
  1. В изображениях загружаем фотографии первого активного слайда
  2. Пишем текст первого слайда для текстовых элементов
Шаг 2
Настраиваем элементы
  1. В строках 32,33 и 118,119 заменяем цифру 7 на ваше количество слайдов
  2. Заменяем ссылки на изображения и текст для элементов каждого слайда, они пронумерованы как case '1', case '2' и т.д.
Шаг 4
Настраиваем слайды в коде
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
  1. Изображение с классом vphoto
  2. Заголовок с классом vtitle
  3. Описание с классом vdescr
  4. Кнопку с классом popupbtn
  5. Стрелки для переключения слайдов с классами vleft и vright
  6. Изображение карты с классом vmap
  7. Шейпы над каждым объектом в карте с классом v-1, v-2 и т.д.
Шаг 1
Добавляем Zero блок и создаем элементы:
Код скопирован!
Скопировать код
Шаг 3
Создаем блок T123 и копируем в него код
<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>
Шаблон страницы
Код скопирован!
67974979
Нажми, чтобы скопировать номер
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Вам также может быть интересно:
Pro подписка
Pro подписка
Модификации
Модификации
Модификации
Pro подписка
Подпишитесь на наши обновления в телеграм