Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
* {box-sizing: border-box;}
.slider-container {
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
}
.slide {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
text-align: center;
padding: 20px;
}
.slide.active {
opacity: 1;
z-index: 2;
}
.slide h1 {
font-size: 48px;
margin-bottom: 10px;
}
.slide p {
font-size: 20px;
margin-bottom: 20px;
}
.slide a.button {
display: inline-block;
padding: 12px 24px;
background-color: rgba(255,255,255,0.2);
border: 2px solid white;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 50px;
transition: 0.3s;
}
.slide a.button:hover {
background-color: white;
color: black;
}
.dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 5;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255,255,255,0.4);
cursor: pointer;
position: relative;
}
.dot.active {
background-color: white;
}
.dot .timer {
position: absolute;
top: -6px;
left: -6px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6);
border-top-color: white;
animation: rotate 5s linear infinite;
display: none;
}
.dot.active .timer {
display: block;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
* {box-sizing: border-box;}
.slider-container {
position: relative;
overflow: hidden;
width: 100%;
height: 600px;
}
.slide {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-direction: column;
text-align: center;
padding: 20px;
}
.slide.active {
opacity: 1;
z-index: 2;
}
.slide h1 {
font-size: 48px;
margin-bottom: 10px;
}
.slide p {
font-size: 20px;
margin-bottom: 20px;
}
.slide a.button {
display: inline-block;
padding: 12px 24px;
background-color: rgba(255,255,255,0.2);
border: 2px solid white;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 50px;
transition: 0.3s;
}
.slide a.button:hover {
background-color: white;
color: black;
}
.dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 5;
}
.dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255,255,255,0.4);
cursor: pointer;
position: relative;
}
.dot.active {
background-color: white;
}
.dot .timer {
position: absolute;
top: -6px;
left: -6px;
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.6);
border-top-color: white;
animation: rotate 5s linear infinite;
display: none;
}
.dot.active .timer {
display: block;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
const slides = document.querySelectorAll('.slide');
const dotsContainer = document.querySelector('.dots');
let currentIndex = 0;
const interval = 5000;
slides.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
dot.innerHTML = '';
dot.addEventListener('click', () => {
showSlide(index);
});
dotsContainer.appendChild(dot);
});
const dots = document.querySelectorAll('.dot');
function showSlide(index) {
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
slides[index].classList.add('active');
dots[index].classList.add('active');
currentIndex = index;
}
function nextSlide() {
let next = currentIndex + 1;
if (next >= slides.length) next = 0;
showSlide(next);
}
showSlide(currentIndex);
setInterval(nextSlide, interval);