/* التصميم العام */ body { font-family: 'Arial', sans-serif; background-color: #fffbe9; color: #333; text-align: right; padding: 20px; } /* الواجهة العلوية */ header { background-color: #d32f2f; color: white; padding: 20px; } nav a { margin-left: 20px; text-decoration: none; color: white; } /* السلايدر */ .slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; } .slider img { width: 100%; height: 300px; object-fit: cover; scroll-snap-align: start; border-radius: 8px; } /* المنتجات */ .products { margin-top: 40px; } .product { max-width: 300px; border: 1px solid #ccc; padding: 15px; background-color: #fff; margin-bottom: 20px; text-align: center; } .product img { width: 100%; height: 200px; object-fit: cover; } button { background-color: #d32f2f; color: white; border: none; padding: 10px 20px; cursor: pointer; } /* التذييل */ footer { margin-top: 50px; text-align: center; font-size: 0.9em; color: #aaa; } // يمكنك استخدام هذا الكود لجعل السلايدر يعمل تلقائيًا let currentIndex = 0; const slides = document.querySelectorAll('.slider img'); setInterval(() => { slides[currentIndex].style.display = 'none'; currentIndex = (currentIndex + 1) % slides.length; slides[currentIndex].style.display = 'block'; }, 3000);
Please add a product to enable express checkout
