<style>
.slider-wrapper {
width: 100%;
max-width: 150%;
margin: 0 auto 50px;
position: relative;
background: #000;
margin-bottom: 70px; /* пространство под слайдером */
}
/* Рамка */
#frame {
display: block;
width: 100%;
height: auto;
z-index: 1;
}
/* Контейнер слайдов */
.slider-container {
position: absolute;
top: 12px;
left: 12px;
width: 97%;
height: 90%;
overflow: hidden;
z-index: 2;
}
/* Слайды */
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(0.85);
transition: transform 2s ease, opacity 2s ease; /* плавная медленная анимация */
z-index: 1;
}
.slide.show {
opacity: 1;
transform: scale(1);
z-index: 2;
}
/* Эффекты слайдов */
.slide.effect-fade {
opacity: 0;
transform: scale(0.85);
transition: transform 2s ease, opacity 2s ease;
}
.slide.effect-fade.show {
opacity: 1;
transform: scale(1);
transition-delay: 0.5s; /* небольшая задержка перед появлением */
}
.slide.effect-wave {
opacity: 0;
transform: scale(0.8) translateY(-20px);
transition: transform 2s ease, opacity 2s ease;
}
.slide.effect-wave.show {
opacity: 1;
transform: scale(1) translateY(0);
transition-delay: 0.5s;
}
/* Картинки внутри слайда */
.slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: center;
}
/* Caption */
.caption {
position: absolute;
bottom: 8px; /* чуть выше низа */
left: 1%;
width: 100%;
background: rgba(33, 35, 41, 0.25); /* тёмный фон #212329 с прозрачностью */
color: #fff;
padding: 5px 5px;
font-size: 11px;
border-radius: 2px;
box-shadow: 0 4px 16px rgba(0,0,0,0.5); /* мягкая тень для объёма */
font-family: 'Poppins', sans-serif; /* стильный шрифт */
font-weight: 500; /* средний вес */
letter-spacing: 0.5px; /* небольшое расстояние между буквами */
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}
.slide.show .caption {
opacity: 1;
transform: translateY(0); /* всплывает к своему положению */
}
/* Адаптив для мобильных */
@media (max-width: 600px) {
.caption {
width: 95%; /* немного уже, чтобы не растягивался */
font-size: 11px; /* уменьшенный размер шрифта */
padding: 4px 5px; /* чуть меньше отступы */
bottom: 5px; /* сдвигаем чуть выше от низа */
}
}
.slider-title{
height: 25px; /* Высота блока */
padding: -1px; /* Отрицательный padding обычно не нужен, можно убрать */
border: 1px solid #232323; /* Рамка вокруг блока */
border-radius: 4px; /* Скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-top: -463px; /* Сдвигает блок вверх относительно нормального потока (вверх) */
left: 1px; /* Отступ слева (вправо на 320px) */
background: url(/images/slider-title.png) 0 0 repeat-x; /* Фон блока */
position: absolute; /* Абсолютное позиционирование относительно родителя */
}
/* Надпись "АФИША" внутри блока */
.slider-title span{
padding: 0 5px;
line-height: 23px;
height: 23px;
display: block;
float: left; /* Выравнивает текст слева внутри блока */
background: url(/images/slider-title.png) 0 -25px repeat-x; /* Фон спана */
font-size: 16px;
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
/* Ссылка "вся афиша" */
.slider-title a{
color: #909090; /* Цвет текста ссылки */
padding: 0 5px;
line-height: 22px;
}
/* При наведении на ссылку */
.slider-title a:hover{
color: #fff;
}
/* Стрелки */
.slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 50; /* выше слайдов */
cursor: pointer;
}
.slider-arrow.prev { left: -23px; }
.slider-arrow.next { right: -24px; }
.slider-arrow img { width: 24px; height: 43px; }
/* Точки */
.dots {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
z-index: 50;
}
.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background: #a94eff;
cursor: pointer;
}
.dot.active { background: #d08aff; }
/* Мобильная адаптация */
@media (max-width: 600px) {
.caption { font-size: 12px; padding: 5px 8px; bottom: 50px; }
.slider-arrow img { width: 20px; height: 36px; }
}
</style>
<div class="slider-wrapper">
<img src="https://jordan.moy.su/images/slider.jpg" id="frame" alt="Frame">
<div class="slider-container" id="slider">
<div class="slide show effect-fade">
<a href="#"><img src="/icons/f1.jpg" alt="Slide 1"></a>
<div class="caption">Любовь приходит и уходит, а кушать хочется всегда. Сладкие иллюзии и очарование любви - это замечательно. Не забывайте про реальность, которая вас окружает. Помните про контроль своего котла эмоций и про внимание к неуправляемому эмоциональному дефициту у женщины.</div>
</div>
<div class="slide effect-wave">
<a href="#"><img src="https://jordan.moy.su/post/f3.jpg" alt="Slide 2"></a>
<div class="caption"></div>
</div>
<div class="slide effect-fade">
<a href="#"><img src="https://jordan.moy.su/post/f4.jpg" alt="Slide 3"></a>
<div class="caption"></div>
</div>
<div class="slide effect-fade">
<a href="#"><img src="https://jordan.moy.su/post/f2.jpg" alt="Slide 3"></a>
<div class="caption"></div>
</div>
<div class="slide effect-fade">
<a href="#"><img src="https://jordan.moy.su/post/post012.png" alt="Slide 3"></a>
<div class="caption"></div>
</div>
<div class="slide effect-fade">
<a href="#"><img src="https://jordan.moy.su/post/post044.jpg" alt="Slide 3"></a>
<div class="caption"></div>
</div>
</div>
<!-- Стрелки -->
<a href="#" class="slider-arrow prev"><img src="/dleimages/arrow-prev.png" alt="Prev"></a>
<a href="#" class="slider-arrow next"><img src="/dleimages/arrow-next.png" alt="Next"></a>
<!-- Точки -->
<div class="dots"></div>
<!-- Заголовок афиши -->
<div class="slider-title">
<span>АФИША</span>
<a href="/load/">вся афиша</a>
</div>
</div>
<script>
(() => {
const slides = document.querySelectorAll('.slide');
const nextBtn = document.querySelector('.slider-arrow.next');
const prevBtn = document.querySelector('.slider-arrow.prev');
const dotsContainer = document.querySelector('.dots');
let index = 0;
let interval;
// создаём точки
slides.forEach((_, i) => {
const dot = document.createElement('span');
dot.classList.add('dot');
if(i===0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(i));
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll('.dot');
function goToSlide(nextIndex){
if(nextIndex === index) return;
const current = slides[index];
const next = slides[nextIndex];
const currentCaption = current.querySelector('.caption');
const nextCaption = next.querySelector('.caption');
// скрываем текущий слайд и подпись
current.classList.remove('show');
if (currentCaption) currentCaption.style.opacity = 0;
// показываем новый слайд
setTimeout(() => {
next.classList.add('show');
// подпись всплывает чуть позже
if (nextCaption) {
nextCaption.style.opacity = 0;
setTimeout(() => nextCaption.style.opacity = 1, 400);
}
}, 100);
// обновляем точки
dots[index].classList.remove('active');
dots[nextIndex].classList.add('active');
index = nextIndex;
}
function nextSlide(){ goToSlide((index + 1) % slides.length); }
function prevSlide(){ goToSlide((index - 1 + slides.length) % slides.length); }
nextBtn.addEventListener('click', e => { e.preventDefault(); nextSlide(); resetAutoplay(); });
prevBtn.addEventListener('click', e => { e.preventDefault(); prevSlide(); resetAutoplay(); });
function startAutoplay(){
interval = setInterval(nextSlide, 10000); // 10 секунд между слайдами
}
function stopAutoplay(){ clearInterval(interval); }
function resetAutoplay(){ stopAutoplay(); startAutoplay(); }
startAutoplay();
// свайп на мобильных
let startX = 0;
const slider = document.getElementById('slider');
slider.addEventListener('touchstart', e => startX = e.touches[0].clientX);
slider.addEventListener('touchend', e => {
const endX = e.changedTouches[0].clientX;
if (startX - endX > 50) nextSlide();
if (endX - startX > 50) prevSlide();
});
})();
</script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
