11const images = [
2- "./assets/cute-cat-a.png" ,
3- "./assets/cute-cat-b.jpg" ,
4- "./assets/cute-cat-c.jpg" ,
2+ "./assets/cute-cat-a.png" ,
3+ "./assets/cute-cat-b.jpg" ,
4+ "./assets/cute-cat-c.jpg" ,
55] ;
66
7- let currentIndex = 0 ;
8- let timer = null ;
97
10- const image = document . querySelector ( "#carousel-img" ) ;
11- const forwardBtn = document . querySelector ( "#forward-btn" ) ;
12- const backwardBtn = document . querySelector ( "#backward-btn" ) ;
13- const autoForwardBtn = document . querySelector ( "#auto-forward" ) ;
14- const autoBackBtn = document . querySelector ( "#auto-backward" ) ;
15- const stopBtn = document . querySelector ( "#stop" ) ;
16-
17- // Display the current image
18- function displayImage ( ) {
19- image . src = images [ currentIndex ] ;
20- }
21-
22- // Move forward
23- function moveForward ( ) {
24- currentIndex = ( currentIndex + 1 ) % images . length ;
25- displayImage ( ) ;
26- }
27-
28- // Move backward
29- function moveBackward ( ) {
30- currentIndex = ( currentIndex - 1 + images . length ) % images . length ;
31- displayImage ( ) ;
32- }
33-
34- // Manual controls
35- forwardBtn . addEventListener ( "click" , moveForward ) ;
36- backwardBtn . addEventListener ( "click" , moveBackward ) ;
37-
38- // Automatic forward
39- autoForwardBtn . addEventListener ( "click" , ( ) => {
40- timer = setInterval ( moveForward , 2000 ) ;
41-
42- autoForwardBtn . disabled = true ;
43- autoBackBtn . disabled = true ;
44- } ) ;
45-
46- // Automatic backward
47- autoBackBtn . addEventListener ( "click" , ( ) => {
48- timer = setInterval ( moveBackward , 2000 ) ;
49-
50- autoForwardBtn . disabled = true ;
51- autoBackBtn . disabled = true ;
52- } ) ;
53-
54- // Stop automatic movement
55- stopBtn . addEventListener ( "click" , ( ) => {
56- clearInterval ( timer ) ;
57- timer = null ;
58-
59- autoForwardBtn . disabled = false ;
60- autoBackBtn . disabled = false ;
61- } ) ;
62-
63- // Show first image when page loads
64- displayImage ( ) ;
8+ // Write your code here
0 commit comments