登陆
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis sem id elit volutpat, non bibendum nisl ultricies. Maecenas malesuada ultricies purus, non sollicitudin massa varius vel.
Nullam lobortis urna sit amet turpis tempus tempus. Sed ut posuere nisl. Integer non lorem tellus. Suspendisse vel ligula ac diam blandit dictum quis elementum nunc. Duis placerat nisl tellus, eget sollicitudin nulla convallis ut.
Suspendisse et lorem eget arcu pharetra dignissim ac vel mi. Mauris ornare, diam nec fringilla porta, odio sapien posuere arcu, consectetur sagittis est sapien a justo.
Praesent non facilisis dolor. Fusce sed ligula vel mauris blandit tempus. Ut porttitor, mi sed hendrerit blandit, enim velit commodo metus, vel rhoncus tortor felis vel leo.
/*------------------------------ style.css ------------------------------*/
/* body styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* container styles */
.container {
width: 100%;
height: 100vh;
position: relative;
}
/* slide styles */
.slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.slide h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 3rem;
color: white;
}
.slide p {
font-size: 1.5rem;
color: white;
text-align: center;
margin: 0;
padding: 0;
max-width: 600px;
}
/* indicators styles */
.indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.indicators span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
background-color: white;
opacity: 0.5;
cursor: pointer;
}
.indicators .active {
opacity: 1;
}
/* button styles */
.btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
border: none;
border-radius: 5px;
background-color: white;
color: black;
font-size: 1.2rem;
cursor: pointer;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
/*------------------------------ script.js ------------------------------*/
const slides = document.querySelectorAll('.slide');
const indicators = document.querySelectorAll('.indicators span');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
let currentSlide = 0;
// add active class to first slide
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
// select previous slide function
function selectPrevSlide() {
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
currentSlide--;
if (currentSlide < 0) currentSlide = slides.length - 1;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
}
// select next slide function
function selectNextSlide() {
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
currentSlide++;
if (currentSlide > slides.length - 1) currentSlide = 0;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
}
// add event listeners to buttons
prev.addEventListener('click', selectPrevSlide);
next.addEventListener('click', selectNextSlide);
// add event listener to indicators
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
currentSlide = index;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
})
})
// automatic slide change
setInterval(() => {
selectNextSlide();
}, 5000);