https://freshburrito.ca/js/image-slider.js?ver=2.6

1const images = [
2    {
3      imgURL: "./assets/images/menu/Preferred-picture-Burrito.webp",
4      cals: "",
5      name: "Burritos"
6    },
7    {
8      imgURL: "./assets/images/menu/Preferred-picture1-Nachos.webp",
9      name: "Nachos",
10      cals: "" // Optional if not provided
11    },
12    {
13      imgURL: "./assets/images/menu/Preffered-picture-Quesadilla.webp",
14      cals: "",
15      name: "Quesadillas"
16    },
17    {
18      imgURL: "./assets/images/menu/chicken-wings.webp",
19      name: "Chicken Wings",
20      cals: ""
21    },
22    {
23      imgURL: "./assets/images/menu/Preferred-picture-bowl.webp",
24      cals: "",
25      name: "Burrito Bowls"
26    },
27  ];
28
29  const imageSlider = document.getElementById('imageSlider');
30  const dishName = document.getElementById('dishName');
31  const dishCals = document.getElementById('dishCals');
32  let currentImageIndex = 0;
33
34  function updateSlider(index) {
35    // Add fade-out class
36    imageSlider.classList.add('fade-out');
37
38    // Wait for the fade-out to complete, then update the content
39    setTimeout(() => {
40      const currentImage = images[index];
41	  imageSlider.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(${currentImage.imgURL})`;
42      dishName.textContent = currentImage.name;
43      dishCals.textContent = currentImage.cals || ''; // Show only if cals exist
44
45      // Add fade-in effect
46      imageSlider.classList.remove('fade-out');
47      imageSlider.classList.add('fade-in');
48
49      // Remove fade-in class after animation completes
50      setTimeout(() => {
51        imageSlider.classList.remove('fade-in');
52      }, 300); // Duration matches the fade-out animation
53    }, 300); // Duration matches the fade-out animation
54  }
55
56  function startSlider() {
57    currentImageIndex = (currentImageIndex + 1) % images.length;
58    updateSlider(currentImageIndex);
59  }
60
61  // Initialize the slider
62  updateSlider(currentImageIndex);
63
64  // Automatically rotate images every 3 seconds
65  setInterval(startSlider, 3000);