1 |
|
---|
2 | const messages = document.querySelectorAll('.banner-message');
|
---|
3 | const prevButton = document.querySelector('.prev-button');
|
---|
4 | const nextButton = document.querySelector('.next-button');
|
---|
5 | let currentIndex = 0;
|
---|
6 | let intervalId;
|
---|
7 |
|
---|
8 | function showMessage(index) {
|
---|
9 | messages.forEach(msg => msg.classList.remove('active'));
|
---|
10 | messages[index].classList.add('active');
|
---|
11 | }
|
---|
12 |
|
---|
13 | function nextMessage() {
|
---|
14 | currentIndex = (currentIndex + 1) % messages.length;
|
---|
15 | showMessage(currentIndex);
|
---|
16 | }
|
---|
17 |
|
---|
18 | function prevMessage() {
|
---|
19 | currentIndex = (currentIndex - 1 + messages.length) % messages.length;
|
---|
20 | showMessage(currentIndex);
|
---|
21 | }
|
---|
22 |
|
---|
23 | // Auto-rotate every 5 seconds
|
---|
24 | function startAutoRotate() {
|
---|
25 | intervalId = setInterval(nextMessage, 5000);
|
---|
26 | }
|
---|
27 |
|
---|
28 | function resetAutoRotate() {
|
---|
29 | clearInterval(intervalId);
|
---|
30 | startAutoRotate();
|
---|
31 | }
|
---|
32 |
|
---|
33 | nextButton.addEventListener('click', () => {
|
---|
34 | nextMessage();
|
---|
35 | resetAutoRotate();
|
---|
36 | });
|
---|
37 |
|
---|
38 | prevButton.addEventListener('click', () => {
|
---|
39 | prevMessage();
|
---|
40 | resetAutoRotate();
|
---|
41 | });
|
---|
42 |
|
---|
43 | startAutoRotate();
|
---|
44 |
|
---|
45 | const menuButton = document.querySelector('.menu-button');
|
---|
46 | const navMenu = document.querySelector('.nav-menu');
|
---|
47 |
|
---|
48 | menuButton.addEventListener('click', () => {
|
---|
49 | navMenu.style.display = navMenu.style.display === 'flex' ? 'none' : 'flex';
|
---|
50 | });
|
---|
51 |
|
---|
52 |
|
---|
53 | document.querySelector('.search-input').addEventListener('keypress', function(e) {
|
---|
54 | if (e.key === 'Enter') {
|
---|
55 | e.preventDefault();
|
---|
56 | this.closest('form').submit();
|
---|
57 | }
|
---|
58 | }); |
---|