Merge pull request #1598 from Arveti-likhitha/enhanced-plantrip-page

fix: Enhanced plantrip page
apu52 · Oct 31, 2024 · 1f975d5 · 1f975d5
2 parents 5d3c61c + c1f79e3
commit 1f975d5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -545,7 +545,7 @@ <h1>TourGuide . . .</h1>
       <div style="display: flex; align-items: center;">
         <img src="/favicon.ico" class="sitelogo">
         <a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
-      </div>
+    </div>
 
       <ul class="navLinks">
         <li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
@@ -2458,7 +2458,7 @@ <h4>Contact Us</h4>
 
 
     <script>
-      let hamburger = document.querySelector('.hamburger');
+      hamburger = document.querySelector('.hamburger');
       hamburger.addEventListener('click', () => {
         let list = document.querySelector('.navLinks');
         list.classList.toggle('activeHamburger');

diff --git a/plantrip.html b/plantrip.html
@@ -209,15 +209,15 @@
     <div style="display: flex; flex-direction: row; align-items: center;">
     <img src="./img/tour1.png" class="sitelogo">
 
-    <a href="#" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a>
+    <a href="index.html" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a>
   </div>
 
     <ul class="navLinks">
       <li class="link aos-init aos-animate" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
       <li class="link aos-init aos-animate" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
-      <li class="link aos-init aos-animate" data-aos=""><a href="#Home">Home</a></li>
-      <li class="link aos-init aos-animate" data-aos=""><a href="#AboutUs">About</a></li>
-      <li class="link dropdown aos-init aos-animate" data-aos="">
+      <li class="link aos-init aos-animate" data-aos=""><a href="index.html">Home</a></li>
+      <li class="link aos-init aos-animate" data-aos=""><a href="about.html">About</a></li>
+      <!-- <li class="link dropdown aos-init aos-animate" data-aos="">
           <a href="#Services" class="dropdown">Services</a>
           <ul class="dropdown-menu">
               <li><a href="#Destinations">Destination</a></li>
@@ -226,7 +226,7 @@
               <li><a href="#tourist">Tourist Guide</a></li>
               <li><a href="#hotel">Hotel &amp; Resort</a></li>
           </ul>
-      </li>
+      </li> -->
       <li class="link aos-init aos-animate" data-aos=""><a href="#testimonials">Testimonial</a></li>
       <li class="link aos-init aos-animate" data-aos=""><a href="feedback.html">Rate Us?</a></li>
       <li class="link aos-init aos-animate" data-aos=""><a href="#cnt-form">Contact Us</a></li>
@@ -315,8 +315,8 @@ <h3>Thailand</h3>
       </div>
     </div>
     <div class="carousel-controls">
-      <button class="carousel-button" onclick="prevSlide()">&#9664;</button>
-      <button class="carousel-button" onclick="nextSlide()">&#9654;</button>
+      <button class="carousel-button" id = "prev-btn" onclick="prevSlide()">&#9664;</button>
+      <button class="carousel-button" id = "next-btn" onclick="nextSlide()">&#9654;</button>
     </div>
   </div>
   <script>
@@ -330,24 +330,34 @@ <h3>Thailand</h3>
     let currentSlide = 0;
     const slides = document.querySelectorAll('.trip-card');
     const totalSlides = slides.length;
+    const slidesInView = 3.5; // Set this to the number of visible slides in the container
+    const slideWidth = slides[0].offsetWidth + 20; // Including margin
+    const maxTranslateX = (totalSlides - slidesInView) * slideWidth;
 
     function updateCarousel() {
       const carousel = document.getElementById('trip-carousel');
-      const slideWidth = slides[0].offsetWidth + 20; // Including margin
-      carousel.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
+      const translateX = -currentSlide * slideWidth;
+      carousel.style.transform = `translateX(${Math.max(translateX,     -maxTranslateX)}px)`;
+    }
+
+    function updateArrows() {
+      document.getElementById('prev-btn').disabled = currentSlide === 0;
+      document.getElementById('next-btn').disabled = currentSlide >=    totalSlides - slidesInView;
     }
 
     function prevSlide() {
       if (currentSlide > 0) {
         currentSlide--;
         updateCarousel();
+        updateArrows();
       }
     }
 
     function nextSlide() {
-      if (currentSlide < totalSlides - 1) {
+      if (currentSlide < totalSlides - slidesInView) {
         currentSlide++;
         updateCarousel();
+        updateArrows();
       }
     }