feat: add slider
This commit is contained in:
parent
b9d0c66dd7
commit
24f756ef54
367
index.html
367
index.html
@ -354,6 +354,10 @@
|
||||
color: #3182ce;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #1c4980;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: clamp(0.8rem, 1vw, 1rem);
|
||||
color: #718096;
|
||||
@ -566,30 +570,145 @@
|
||||
</section>
|
||||
|
||||
|
||||
<div id="slider-placeholder"></div>
|
||||
<style>
|
||||
.opportunity-section {
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
<script>
|
||||
fetch("slider.html")
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const placeholder = document.getElementById("slider-placeholder");
|
||||
placeholder.innerHTML = data;
|
||||
.container {
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Run the slider initialization function
|
||||
const scripts = placeholder.querySelectorAll("script");
|
||||
scripts.forEach(oldScript => {
|
||||
if (oldScript.textContent.includes("initSlider")) {
|
||||
const newScript = document.createElement("script");
|
||||
newScript.textContent = oldScript.textContent + "\ninitSlider();";
|
||||
document.body.appendChild(newScript);
|
||||
.header {
|
||||
text-align: start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 35px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6b7280;
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cards-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => console.error("Failed to load slider:", err));
|
||||
</script>
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.cards-grid {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.card-add {
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 160px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.card-add:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.card-add h3 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-quizzes {
|
||||
background: linear-gradient(to bottom right, #60a5fa, #2563eb);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-hackathons {
|
||||
background: linear-gradient(to bottom right, #4ade80, #22c55e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-scholarships {
|
||||
background: linear-gradient(to bottom right, #a855f7, #7c3aed);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card-conferences {
|
||||
background: linear-gradient(to bottom right, #fed7aa, #fdba74);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.card-festivals {
|
||||
background: linear-gradient(to bottom right, #facc15, #eab308);
|
||||
color: #1f2937;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="opportunity-section">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h2 class="title">
|
||||
Pick <span class="highlight">The Right Opportunity!</span>
|
||||
</h2>
|
||||
<div class="header-content">
|
||||
<p class="subtitle">Explore opportunities that best suits your skills and interests!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cards-grid">
|
||||
<div class="card-add card-quizzes">
|
||||
<h3>Quizzes</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-hackathons">
|
||||
<h3>Hackathons</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-scholarships">
|
||||
<h3>Scholarships</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-conferences">
|
||||
<h3>Conferences</h3>
|
||||
</div>
|
||||
|
||||
<div class="card-add card-festivals">
|
||||
<h3>College Festivals</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="slider"></div>
|
||||
<div id="slide"></div>
|
||||
|
||||
<section class="our-numbers">
|
||||
<h2>Our Numbers</h2>
|
||||
@ -626,10 +745,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script>
|
||||
fetch("footer.html")
|
||||
@ -638,9 +753,217 @@
|
||||
document.getElementById("footer-placeholder").innerHTML = data;
|
||||
})
|
||||
.catch(err => console.error("Failed to load footer:", err));
|
||||
fetch("slider.html")
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
document.getElementById("slider").innerHTML = data;
|
||||
})
|
||||
.catch(err => console.error("Failed to load slider:", err));
|
||||
fetch("slide.html")
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
document.getElementById("slide").innerHTML = data;
|
||||
})
|
||||
.catch(err => console.error("Failed to load footer:", err));
|
||||
function goToLogin() {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
(function () {
|
||||
// Prevent multiple instances
|
||||
if (window.Slide1rSliderLoaded) {
|
||||
return;
|
||||
}
|
||||
window.Slide1rSliderLoaded = true;
|
||||
|
||||
class Slide1rSlider {
|
||||
constructor() {
|
||||
// Add a small delay to ensure DOM is fully rendered
|
||||
setTimeout(() => {
|
||||
this.initSlider();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
initSlider() {
|
||||
try {
|
||||
this.track = document.getElementById('slide1rTrack');
|
||||
this.slides = document.querySelectorAll('.slide1');
|
||||
this.prevBtn = document.getElementById('prevBtn');
|
||||
this.nextBtn = document.getElementById('nextBtn');
|
||||
|
||||
if (!this.track || this.slides.length === 0) {
|
||||
console.warn("Slider DOM elements not found. Retrying...");
|
||||
// Retry after a short delay
|
||||
setTimeout(() => this.initSlider(), 200);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
this.autoPlayDuration = 5000; // 5 seconds
|
||||
|
||||
this.init();
|
||||
} catch (err) {
|
||||
console.error("Slider initialization failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
try {
|
||||
this.updateSlider();
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
this.bindKeyboardEvents();
|
||||
} catch (err) {
|
||||
console.error("Slider init error:", err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
updateSlider() {
|
||||
try {
|
||||
const translateX = -this.currentIndex * 100;
|
||||
this.track.style.transform = `translateX(${translateX}%)`;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error updating slider:", err);
|
||||
}
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
try {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to next slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
prevSlide() {
|
||||
try {
|
||||
this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to previous slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
goToSlide(index) {
|
||||
try {
|
||||
this.currentIndex = index;
|
||||
this.updateSlider();
|
||||
this.restartAutoPlay();
|
||||
} catch (err) {
|
||||
console.error("Error going to slide:", err);
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay() {
|
||||
try {
|
||||
this.stopAutoPlay();
|
||||
|
||||
this.autoPlayInterval = setInterval(() => {
|
||||
this.nextSlide();
|
||||
}, this.autoPlayDuration);
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error starting autoplay:", err);
|
||||
}
|
||||
}
|
||||
|
||||
stopAutoPlay() {
|
||||
if (this.autoPlayInterval) {
|
||||
clearInterval(this.autoPlayInterval);
|
||||
this.autoPlayInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
restartAutoPlay() {
|
||||
this.stopAutoPlay();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
try {
|
||||
if (this.nextBtn) {
|
||||
this.nextBtn.addEventListener('click', () => this.nextSlide());
|
||||
}
|
||||
|
||||
if (this.prevBtn) {
|
||||
this.prevBtn.addEventListener('click', () => this.prevSlide());
|
||||
}
|
||||
|
||||
// Pause on hover
|
||||
const container = document.querySelector('.slide1r-container');
|
||||
if (container) {
|
||||
container.addEventListener('mouseenter', () => this.stopAutoPlay());
|
||||
container.addEventListener('mouseleave', () => this.startAutoPlay());
|
||||
}
|
||||
|
||||
// Touch support
|
||||
let startX = 0;
|
||||
let endX = 0;
|
||||
|
||||
if (this.track) {
|
||||
this.track.addEventListener('touchstart', (e) => {
|
||||
startX = e.touches[0].clientX;
|
||||
this.stopAutoPlay();
|
||||
});
|
||||
|
||||
this.track.addEventListener('touchmove', (e) => {
|
||||
endX = e.touches[0].clientX;
|
||||
});
|
||||
|
||||
this.track.addEventListener('touchend', () => {
|
||||
const deltaX = startX - endX;
|
||||
if (Math.abs(deltaX) > 50) {
|
||||
if (deltaX > 0) {
|
||||
this.nextSlide();
|
||||
} else {
|
||||
this.prevSlide();
|
||||
}
|
||||
}
|
||||
this.startAutoPlay();
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error binding events:", err);
|
||||
}
|
||||
}
|
||||
|
||||
bindKeyboardEvents() {
|
||||
// Use a more specific event listener to avoid conflicts
|
||||
const keyHandler = (e) => {
|
||||
// Only respond if the slider container is visible
|
||||
const container = document.querySelector('.slide1r-container');
|
||||
if (container && this.isElementInViewport(container)) {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
this.prevSlide();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
this.nextSlide();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', keyHandler);
|
||||
}
|
||||
|
||||
isElementInViewport(el) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
return (
|
||||
rect.top >= 0 &&
|
||||
rect.left >= 0 &&
|
||||
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
||||
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the slider immediately
|
||||
new Slide1rSlider();
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
29
slide.html
Normal file
29
slide.html
Normal file
@ -0,0 +1,29 @@
|
||||
<style>
|
||||
.hover-slider {
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.container-slider {
|
||||
height: 200px;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-slider-baby {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="hover-slider">
|
||||
<div class="container-slider">
|
||||
<div class="container-slider-baby container-slider-1"></div>
|
||||
<div class="container-slider-baby container-slider-2"></div>
|
||||
<div class="container-slider-baby container-slider-3"></div>
|
||||
<div class="container-slider-baby container-slider-4"></div>
|
||||
</div>
|
||||
</section>
|
||||
509
slider.html
509
slider.html
@ -1,247 +1,334 @@
|
||||
<div class="slider-container">
|
||||
<div class="slider-wrapper">
|
||||
<div class="slider-track" id="sliderTrack">
|
||||
<div class="slide"></div>
|
||||
<div class="slide"></div>
|
||||
<div class="slide"></div>
|
||||
<div class="slide"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="nav-button prev-btn" id="prevBtn"></button>
|
||||
<button class="nav-button next-btn" id="nextBtn"></button>
|
||||
|
||||
<div class="dots-container" id="dotsContainer"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.slider-container {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.slide1r-container {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
padding: 25px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.slide1r-wrapper {
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slide1r-track {
|
||||
display: flex;
|
||||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide1 {
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.slide1-box {
|
||||
display: flex;
|
||||
gap: 25px;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.slide1-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s ease;
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.image-container:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Image overlays */
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
|
||||
color: white;
|
||||
padding: 20px;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.image-container:hover .image-overlay {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.image-overlay h4 {
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.image-overlay p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Navigation buttons */
|
||||
.nav-button {
|
||||
position: absolute;
|
||||
outline: solid rgba(166, 166, 166, 0.485) 1px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: none;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background: white;
|
||||
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
.nav-button::before {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-top: 2.5px solid currentColor;
|
||||
border-right: 2.5px solid currentColor;
|
||||
}
|
||||
|
||||
.prev-btn::before {
|
||||
transform: rotate(-135deg);
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.next-btn::before {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.dots-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #e0e0e0;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: #667eea;
|
||||
transform: scale(1.3);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.dot:hover:not(.active) {
|
||||
background: #bbb;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 768px) {
|
||||
.slide1r-container {
|
||||
margin: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.slider-wrapper {
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
.slide1-box {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.slider-track {
|
||||
display: flex;
|
||||
transition: transform 0.5s ease;
|
||||
.image-container {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
min-width: 100%;
|
||||
height: 400px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.slide:nth-child(1) {
|
||||
background-image: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
|
||||
}
|
||||
|
||||
.slide:nth-child(2) {
|
||||
background-image: url('https://images.unsplash.com/photo-1542744094-24638eff58bb?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
|
||||
}
|
||||
|
||||
.slide:nth-child(3) {
|
||||
background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
|
||||
}
|
||||
|
||||
.slide:nth-child(4) {
|
||||
background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&crop=entropy&cs=tinysrgb');
|
||||
}
|
||||
|
||||
/* Navigation buttons */
|
||||
.nav-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: white;
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: 20px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: 20px;
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.nav-button::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top: 2px solid currentColor;
|
||||
border-right: 2px solid currentColor;
|
||||
.image-overlay {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.prev-btn::before {
|
||||
transform: rotate(-135deg);
|
||||
margin-left: 2px;
|
||||
.image-overlay h4 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.next-btn::before {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 2px;
|
||||
.image-overlay p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.slide1r-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Dots indicator */
|
||||
.dots-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
.slide1-box {
|
||||
gap: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
.image-container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: #667eea;
|
||||
transform: scale(1.2);
|
||||
.nav-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.dot:hover {
|
||||
background: #999;
|
||||
.prev-btn {
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.slide {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.prev-btn {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
right: 10px;
|
||||
}
|
||||
.next-btn {
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="slide1r-container">
|
||||
<div class="slide1r-wrapper">
|
||||
<div class="slide1r-track" id="slide1rTrack">
|
||||
<!-- Slide 1 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Business Meeting">
|
||||
<div class="image-overlay">
|
||||
<h4>Business Innovation</h4>
|
||||
<p>Modern workspace collaboration</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1542744094-24638eff58bb?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Architecture">
|
||||
<div class="image-overlay">
|
||||
<h4>Modern Architecture</h4>
|
||||
<p>Contemporary design solutions</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initSlider() {
|
||||
class SimpleSlider {
|
||||
constructor() {
|
||||
this.track = document.getElementById('sliderTrack');
|
||||
this.slides = document.querySelectorAll('.slide');
|
||||
this.prevBtn = document.getElementById('prevBtn');
|
||||
this.nextBtn = document.getElementById('nextBtn');
|
||||
this.dotsContainer = document.getElementById('dotsContainer');
|
||||
<!-- Slide 2 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Analytics">
|
||||
<div class="image-overlay">
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Business intelligence insights</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Technology">
|
||||
<div class="image-overlay">
|
||||
<h4>Technology Hub</h4>
|
||||
<p>Innovation and development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
<!-- Slide 3 -->
|
||||
<div class="slide1">
|
||||
<div class="slide1-box">
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Creativity">
|
||||
<div class="image-overlay">
|
||||
<h4>Creative Space</h4>
|
||||
<p>Inspiration and expression</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&h=400&fit=crop&crop=entropy&cs=tinysrgb"
|
||||
alt="Beach">
|
||||
<div class="image-overlay">
|
||||
<h4>Tropical Paradise</h4>
|
||||
<p>Natural beauty and relaxation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createDots();
|
||||
this.updateSlider();
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
|
||||
createDots() {
|
||||
for (let i = 0; i < this.totalSlides; i++) {
|
||||
const dot = document.createElement('div');
|
||||
dot.classList.add('dot');
|
||||
if (i === 0) dot.classList.add('active');
|
||||
dot.addEventListener('click', () => this.goToSlide(i));
|
||||
this.dotsContainer.appendChild(dot);
|
||||
}
|
||||
}
|
||||
|
||||
updateSlider() {
|
||||
const translateX = -this.currentIndex * 100;
|
||||
this.track.style.transform = `translateX(${translateX}%)`;
|
||||
|
||||
const dots = this.dotsContainer.querySelectorAll('.dot');
|
||||
dots.forEach((dot, index) => {
|
||||
dot.classList.toggle('active', index === this.currentIndex);
|
||||
});
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
|
||||
this.updateSlider();
|
||||
}
|
||||
|
||||
prevSlide() {
|
||||
this.currentIndex = this.currentIndex === 0 ? this.totalSlides - 1 : this.currentIndex - 1;
|
||||
this.updateSlider();
|
||||
}
|
||||
|
||||
goToSlide(index) {
|
||||
this.currentIndex = index;
|
||||
this.updateSlider();
|
||||
}
|
||||
|
||||
startAutoPlay() {
|
||||
setInterval(() => {
|
||||
this.nextSlide();
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.nextBtn.addEventListener('click', () => this.nextSlide());
|
||||
this.prevBtn.addEventListener('click', () => this.prevSlide());
|
||||
|
||||
let startX = 0;
|
||||
this.track.addEventListener('touchstart', (e) => {
|
||||
startX = e.touches[0].clientX;
|
||||
});
|
||||
|
||||
this.track.addEventListener('touchend', (e) => {
|
||||
const endX = e.changedTouches[0].clientX;
|
||||
const diff = startX - endX;
|
||||
|
||||
if (Math.abs(diff) > 50) {
|
||||
if (diff > 0) this.nextSlide();
|
||||
else this.prevSlide();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
new SimpleSlider();
|
||||
}
|
||||
</script>
|
||||
<button class="nav-button prev-btn" id="prevBtn" aria-label="Previous slide"></button>
|
||||
<button class="nav-button next-btn" id="nextBtn" aria-label="Next slide"></button>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user