add img and reslyle page

2025-04-15 12:33:39 +00:00
parent 1d7d611282
commit 1801fa0c48
16 changed files with 598 additions and 65 deletions
--- a/js/script.js
+++ b/js/script.js
@@ -1,3 +1,25 @@
+$(document).ready(function() {
+    // Watch slider animation
+    let currentSlide = 0;
+    const slides = $('.slide');
+    const totalSlides = slides.length;
+    
+    function showSlide(n) {
+        slides.removeClass('active');
+        slides.eq(n).addClass('active');
+    }
+    
+    function nextSlide() {
+        currentSlide = (currentSlide + 1) % totalSlides;
+        showSlide(currentSlide);
+    }
+    
+    // Start auto-rotation every 3 seconds
+    setInterval(nextSlide, 3000);
+    
+    // Initialize first slide
+    showSlide(0);
+});
 // Mobile menu toggle
 const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
 const navLinks = document.querySelector('.nav-links');
@@ -82,4 +104,84 @@ cardsWrapper.addEventListener('scroll', checkScrollPosition);
 reviewsWrapper.addEventListener('scroll', checkScrollPosition);
 window.addEventListener('resize', checkScrollPosition);
 // Initial check
-checkScrollPosition();
+checkScrollPosition();
+
+// Watch slider functionality
+$(document).ready(function() {
+    const slider = $('.cta-image');
+    const images = [
+        'img/watch_slide_6.png',
+        'img/watch_slide_7.png',
+        'img/watch_slide_8.png',
+        'img/watch_slide_9.png',
+        'img/watch_slide_10.png',
+        'img/watch_slide_11.png',
+        'img/watch_slide_12.png',
+        'img/watch_slide_13.png',
+        'img/watch_slide_14.png',
+        'img/watch_slide_15.png'
+    ];
+    
+    // Replace img with slider container
+    slider.html('<div class="slider-container"></div>');
+    const container = $('.slider-container');
+    
+    // Add all images to slider (hidden except first)
+    images.forEach((img, index) => {
+        container.append(`<img src="${img}" class="slide ${index === 0 ? 'active' : ''}" alt="Telmi Watch">`);
+    });
+    
+    // Auto-rotate slides
+    let currentIndex = 0;
+    setInterval(() => {
+        currentIndex = (currentIndex + 1) % images.length;
+        $('.slide.active').fadeOut(500, function() {
+            $(this).removeClass('active');
+            $(`.slide:eq(${currentIndex})`).fadeIn(500).addClass('active');
+        });
+    }, 3000);
+
+    // Modal functionality
+    let currentModalIndex = 0;
+    
+    $('.slide').click(function() {
+        currentModalIndex = $(this).index('.slide');
+        updateModalImage();
+        $('.modal-overlay').addClass('active');
+    });
+
+    function updateModalImage() {
+        const imgSrc = images[currentModalIndex];
+        $('.modal-image').attr('src', imgSrc);
+    }
+
+    $('.modal-nav.prev').click(function(e) {
+        e.stopPropagation();
+        currentModalIndex = (currentModalIndex - 1 + images.length) % images.length;
+        updateModalImage();
+    });
+
+    $('.modal-nav.next').click(function(e) {
+        e.stopPropagation();
+        currentModalIndex = (currentModalIndex + 1) % images.length;
+        updateModalImage();
+    });
+
+    $('.close-modal').click(function() {
+        $('.modal-overlay').removeClass('active');
+    });
+
+    // Close modal when clicking outside image
+    $(document).click(function(e) {
+        if ($(e.target).hasClass('modal-overlay')) {
+            $('.modal-overlay').removeClass('active');
+        }
+    });
+
+    // Close modal with ESC key
+    $(document).keyup(function(e) {
+        if (e.key === "Escape") {
+            $('.modal-overlay').removeClass('active');
+        }
+    });
+});