Update README.md

README.md

@@ -407,7 +407,51 @@ body {
   </div>
 </div>
 
+  <div class="section">
+    <div class="section-header">
+      <h2 class="section-title">🖼️ Example Images</h2>
+    </div>
+    <div class="section-content">
+      <div class="carousel">
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="https://huggingface.co/ayjays132/CustomImageGenerator/blob/main/ImageFiles/Ancient%20Temple%20in%20a%20Lush%20Jungle.jpg" alt="Ancient Temple in a Lush Jungle">
+          </div>
+          <!-- Add more carousel items here -->
+        </div>
+        <div class="carousel-controls">
+          <button class="carousel-control-prev" onclick="prevSlide()">❮</button>
+          <button class="carousel-control-next" onclick="nextSlide()">❯</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
+let currentIndex = 0;
+
+function showSlide(index) {
+  const slides = document.querySelectorAll('.carousel-item');
+  if (index >= slides.length) {
+    currentIndex = 0;
+  } else if (index < 0) {
+    currentIndex = slides.length - 1;
+  } else {
+    currentIndex = index;
+  }
+  const offset = -currentIndex * 100;
+  document.querySelector('.carousel-inner').style.transform = `translateX(${offset}%)`;
+}
+
+function nextSlide() {
+  showSlide(currentIndex + 1);
+}
+
+function prevSlide() {
+  showSlide(currentIndex - 1);
+}
+
 let slideIndex = 1;
 showSlides(slideIndex);