<!-- WOWSlider -->
<script src="/fw-slider/wowslider.js"></script>
<script src="/fw-slider/script.js"></script>
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><a href="#"><img src="https://jordan.moy.su/fw-slider/021post.jpg" alt="Слайд 1" title="" /></a></li>
<li><a href="#"><img src="https://jordan.moy.su/fw-slider/01post.png" alt="Слайд 2" title="" /></a></li>
<li><a href="#"><img src="https://jordan.moy.su/fw-slider/post04.jpg" alt="Слайд 3" title="" /></a></li>
<li><a href="#"><img src="https://jordan.moy.su/fw-slider/5post.png" alt="Слайд 4" title="" /></a></li>
<li><a href="#"><img src="https://jordan.moy.su/fw-slider/post04.jpg" alt="Слайд 5" title="" /></a></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href=""><span>1</span></a>
<a href=""><span>2</span></a>
<a href=""><span>3</span></a>
<a href=""><span>4</span></a>
<a href=""><span>5</span></a>
</div>
</div>
<div class="ws_shadow"></div>
<!-- Фуллскрин -->
<div class="ws-expand" onclick="openFullscreen()">⤢</div>
<!-- Только кастомные стрелки -->
<div class="ws-arrow ws-arrow-left">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</div>
<div class="ws-arrow ws-arrow-right">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</div>
<!-- Кастомный блок: заголовок, описание, кнопка -->
<div class="custom-slide-info">
<h2 id="slide-title" class="slide-text">Слайд 1</h2>
<p id="slide-desc" class="slide-text">Описание темы для слайда 1</p>
<a href="#" id="slide-btn" class="custom-btn">Перейти к теме</a>
</div>
</div>
<style>
/* Кастомный блок снизу */
.custom-slide-info {
position: absolute;
left: 20px;
bottom: 30px;
z-index: 25;
background: rgba(0,0,0,0.5);
padding: 20px 25px;
border-radius: 10px;
color: #fff;
max-width: 350px;
font-family: Arial, sans-serif;
}
.custom-slide-info h2 {
margin: 0 0 10px 0;
font-size: 26px;
line-height: 1.2;
}
.custom-slide-info p {
margin: 0 0 15px 0;
font-size: 16px;
line-height: 1.5;
}
/* Кнопка */
.custom-btn {
display: inline-block;
text-decoration: none;
color: #fff;
background-color: #ff69b4;
padding: 12px 24px;
font-weight: 200;
font-size: 14px;
font-family: 'Montserrat', 'Arial', sans-serif;
letter-spacing: 1.5px;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s;
position: relative;
z-index: 1;
}
.custom-btn::before {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: linear-gradient(120deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 100%);
transform: rotate(25deg) translateX(-100%);
transition: transform 0.5s ease;
}
.custom-btn:hover::before {
transform: rotate(25deg) translateX(100%);
}
.custom-btn:hover {
transform: scale(1.05);
animation: pulse 1s infinite;
}
@keyframes pulse {
0%,100% { box-shadow:0 0 10px rgba(255,105,180,0.5); }
50% { box-shadow:0 0 20px rgba(255,105,180,0.8); }
}
/* Анимация текста */
#slide-title, #slide-desc {
transition: opacity 0.5s ease, transform 0.5s ease;
display: block;
}
.fade-out { opacity: 0; transform: translateY(-10px); }
.fade-in { opacity: 1; transform: translateY(0); }
/* Фуллскрин кнопка */
.ws-expand {
position: absolute;
top:10px;
right:10px;
font-size:30px;
color:#fff;
background: rgba(0,0,0,0.5);
padding:6px 12px;
border-radius:4px;
cursor:pointer;
z-index:20;
transition: all 0.3s;
}
.ws-expand:hover {
transform: scale(1.2);
background: rgba(0,0,0,0.7);
}
/* Кастомные стрелки */
.ws-arrow {
position: absolute;
top: 58%; /* подняли чуть выше */
transform: translateY(-40%);
width: 60px;
height: 60px;
background: rgba(0,0,0,0.3);
border-radius: 60%;
cursor: pointer;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.ws-arrow:hover {
background: rgba(0,0,0,0.6);
transform: translateY(-50%) scale(1.2);
}
.ws-arrow-left { left: 20px; }
.ws-arrow-right { right: 20px; }
/* Скрываем кастомные стрелки (но не трогаем встроенные) */
#wowslider-container1 .ws-arrow {
display: none !important;
pointer-events: none !important;
}
/* Встроенные стрелки WOWSlider */
#wowslider-container1 .ws_prev,
#wowslider-container1 .ws_next {
display: block !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 64px !important;
height: 64px !important;
margin: 0 !important;
background: rgba(0,0,0,0.36) no-repeat center center !important;
background-size: 28px 28px !important;
border-radius: 50% !important;
z-index: 50 !important;
cursor: pointer !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Позиционирование */
#wowslider-container1 .ws_prev { left: 14px !important; }
#wowslider-container1 .ws_next { right: 14px !important; }
/* Размер стрелок внутри */
#wowslider-container1 .ws_prev img,
#wowslider-container1 .ws_next img {
width: 28px !important;
height: 28px !important;
display: block;
margin: auto;
}
</style>
<script>
// Функция фуллскрина
function openFullscreen() {
const slider = document.getElementById("wowslider-container1");
if (slider.requestFullscreen) slider.requestFullscreen();
else if (slider.webkitRequestFullscreen) slider.webkitRequestFullscreen();
else if (slider.msRequestFullscreen) slider.msRequestFullscreen();
}
// Данные слайдов
const slideData = [
{ title: "Развод", desc: "Это малоприятная процедура. Она заключается не только в моральных проблемах, но имеет и материальную сторону.", url: "#" },
{ title: "Измена", desc: "В паре измена это нарушение взятых на себя обязательств. И у каждой пары свои правила.", url: "#" },
{ title: "Измена", desc: "В паре измена это нарушение взятых на себя обязательств. И у каждой пары свои правила.", url: "#" },
{ title: "Жена", desc: "Женщина по отношению к партнёру, состоящему с ней в браке.", url: "#" },
{ title: "Богини", desc: "Как общаться с Богинями, никогда не реагируй на наглость", url: "#" },
];
// Функция обновления текста с анимацией
function updateSlideInfo(slideIndex) {
const titleEl = document.getElementById("slide-title");
const descEl = document.getElementById("slide-desc");
const btnEl = document.getElementById("slide-btn");
const data = slideData[slideIndex];
if (!titleEl || !descEl) return;
titleEl.classList.add("fade-out");
descEl.classList.add("fade-out");
setTimeout(() => {
titleEl.textContent = data.title;
descEl.textContent = data.desc;
if (btnEl) btnEl.href = data.url;
titleEl.classList.remove("fade-out");
descEl.classList.remove("fade-out");
titleEl.classList.add("fade-in");
descEl.classList.add("fade-in");
setTimeout(() => {
titleEl.classList.remove("fade-in");
descEl.classList.remove("fade-in");
}, 600);
}, 300);
}
// Инициализация WOWSlider
jQuery("#wowslider-container1").wowSlider({
effect: "parallax",
duration: 500,
delay: 5000,
width: 1360,
height: 768,
autoPlay: true,
stopOnHover: false,
loop: true,
caption: true,
onStep: function(index){
updateSlideInfo(index);
}
});
// **Установка текста для первого слайда сразу**
updateSlideInfo(0);
</script>
