/* Основные стили */
.my-slider-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.my-slider {
position: relative;
height: 500px;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.my-slide {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.6s ease;
background-size: cover;
background-position: center;
}
.my-slide:nth-child(1) { background-image: url('https://example.com/slide1.jpg'); }
.my-slide:nth-child(2) { background-image: url('https://example.com/slide2.jpg'); }
.my-slide:nth-child(3) { background-image: url('https://example.com/slide3.jpg'); }
.my-slide.active {
opacity: 1;
z-index: 1;
}
.slide-content {
position: absolute;
bottom: 60px;
left: 50px;
max-width: 600px;
color: white;
text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.slide-btn {
display: inline-block;
padding: 12px 30px;
background: #ff3366;
color: white;
text-decoration: none;
border-radius: 30px;
margin-top: 15px;
font-weight: bold;
transition: all 0.3s ease;
}
.slide-btn:hover {
background: #ff1a52;
transform: translateY(-2px);
}
/* Навигация */
.slider-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 20px;
}
.prev-slide, .next-slide {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.prev-slide:hover, .next-slide:hover {
background: #f0f0f0;
}
.dots-container {
display: flex;
gap: 10px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #ff3366;
transform: scale(1.2);
}
/* Адаптивность */
@media (max-width: 768px) {
.my-slider {
height: 400px;
}
.slide-content {
left: 20px;
right: 20px;
bottom: 40px;
text-align: center;
}
.slide-content h2 {
font-size: 24px;
}
}
Заголовок слайда 1
Описание для первого слайда
Кнопка Заголовок слайда 2
Описание для второго слайда
Кнопка ЗАГОЛОВОК 228
Описание для третьего слайда
Кнопка
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.my-slide');
const dotsContainer = document.querySelector('.dots-container');
const prevBtn = document.querySelector('.prev-slide');
const nextBtn = document.querySelector('.next-slide');
let currentSlide = 0;
// Создаем точки навигации
slides.forEach((slide, index) => {
const dot = document.createElement('span');
dot.classList.add('dot');
if(index === 0) dot.classList.add('active');
dot.addEventListener('click', () => goToSlide(index));
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll('.dot');
// Функция переключения слайдов
function goToSlide(n) {
slides[currentSlide].classList.remove('active');
dots[currentSlide].classList.remove('active');
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
// Кнопки навигации
prevBtn.addEventListener('click', () => goToSlide(currentSlide - 1));
nextBtn.addEventListener('click', () => goToSlide(currentSlide + 1));
// Автопрокрутка (по желанию)
let slideInterval = setInterval(() => goToSlide(currentSlide + 1), 5000);
// Останавливаем автопрокрутку при наведении
const slider = document.querySelector('.my-slider');
slider.addEventListener('mouseenter', () => clearInterval(slideInterval));
slider.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => goToSlide(currentSlide + 1), 5000);
});
});