dhanush.s/kodepilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:slider added

Browse Source
This commit is contained in:
rajesh.n 2025-09-23 18:43:12 +05:30
parent c1e9de0e63
commit b9d0c66dd7
2 changed files with 130 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -565,6 +565,32 @@
</div> </div>
</section> </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"> <section class="our-numbers">
<h2>Our Numbers</h2> <h2>Our Numbers</h2>
@ -601,6 +627,9 @@
</div> </div>
</section> </section>
<div id="footer-placeholder"></div> <div id="footer-placeholder"></div>
<script> <script>
fetch("footer.html") fetch("footer.html")
@ -613,6 +642,9 @@
window.location.href = "/login"; window.location.href = "/login";
} }
</script> </script>
</body> </body>
</html> </html>

44
slider.html
View File

@ -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> <style>
.slider-container { .slider-container {
margin: 0 auto;
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
position: relative; position: relative;
@ -139,24 +156,9 @@
} }
</style> </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>
<div class="dots-container" id="dotsContainer"></div>
</div>
<script> <script>
function initSlider() {
class SimpleSlider { class SimpleSlider {
constructor() { constructor() {
this.track = document.getElementById('sliderTrack'); this.track = document.getElementById('sliderTrack');
@ -223,13 +225,6 @@
this.nextBtn.addEventListener('click', () => this.nextSlide()); this.nextBtn.addEventListener('click', () => this.nextSlide());
this.prevBtn.addEventListener('click', () => this.prevSlide()); 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; let startX = 0;
this.track.addEventListener('touchstart', (e) => { this.track.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX; startX = e.touches[0].clientX;
@ -247,7 +242,6 @@
} }
} }
document.addEventListener('DOMContentLoaded', () => {
new SimpleSlider(); new SimpleSlider();
}); }
</script> </script>