feat:slider added
This commit is contained in:
parent
c1e9de0e63
commit
b9d0c66dd7
32
index.html
32
index.html
@ -565,6 +565,32 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div id="slider-placeholder"></div>
|
||||
|
||||
<script>
|
||||
fetch("slider.html")
|
||||
.then(res => res.text())
|
||||
.then(data => {
|
||||
const placeholder = document.getElementById("slider-placeholder");
|
||||
placeholder.innerHTML = data;
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => console.error("Failed to load slider:", err));
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="our-numbers">
|
||||
<h2>Our Numbers</h2>
|
||||
|
||||
@ -601,6 +627,9 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="footer-placeholder"></div>
|
||||
<script>
|
||||
fetch("footer.html")
|
||||
@ -613,6 +642,9 @@
|
||||
window.location.href = "/login";
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
202
slider.html
202
slider.html
@ -1,5 +1,22 @@
|
||||
<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;
|
||||
@ -139,115 +156,92 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
<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');
|
||||
|
||||
<div class="dots-container" id="dotsContainer"></div>
|
||||
</div>
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
|
||||
<script>
|
||||
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');
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.currentIndex = 0;
|
||||
this.totalSlides = this.slides.length;
|
||||
init() {
|
||||
this.createDots();
|
||||
this.updateSlider();
|
||||
this.bindEvents();
|
||||
this.startAutoPlay();
|
||||
}
|
||||
|
||||
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());
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft') this.prevSlide();
|
||||
if (e.key === 'ArrowRight') this.nextSlide();
|
||||
});
|
||||
|
||||
// Touch navigation for mobile
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new SimpleSlider();
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user