added photo reel

2025-05-13 11:55:58 +01:00 · 2025-05-13 11:55:58 +01:00 · 801998155b
commit 801998155b
parent 5546298fa0
6 changed files with 246 additions and 140 deletions
--- a/css/style.css
+++ b/css/style.css
@ -9759,3 +9759,22 @@ textarea.form-control {
 .acorn a:hover {
  color: var(--blue);
 }
+
+
+
+.carousel-container {
+    overflow: hidden;
+}
+.image-row {
+    display: flex;
+    transition: transform 0.5s ease-in-out; /* Adjust duration and easing to match slideDuration */
+}
+.col-md-3 {
+    flex: 0 0 auto;
+    width: 25%; /* Adjust based on numberOfVisible */
+}
+.image-item {
+    width: 100%;
+    height: auto;
+    display: block;
+}
--- a/includes/footer.php
+++ b/includes/footer.php
@ -67,7 +67,9 @@
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
-            <p class="acorn">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved - Hosted & Managed by <a href="https://acorn-media.co.uk/" target=_blank><strong>Acorn Media</strong></a></p>
+        <p class="acorn">Copyright &copy;<script>
+            document.write(new Date().getFullYear());
+          </script> All rights reserved - Hosted & Managed by <a href="https://acorn-media.co.uk/" target=_blank><strong>Acorn Media</strong></a></p>
      </div>
    </div>
  </div>
@ -76,7 +78,10 @@


 <!-- loader -->
-  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
+<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
+    <circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
+    <circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00" />
+  </svg></div>


 <script src="js/jquery.min.js"></script>
@ -95,6 +100,10 @@
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
 <script src="js/google-map.js"></script>
 <script src="js/main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="js/script.js"></script>
+</body>

 </body>
+
 </html>
--- a/includes/header.php
+++ b/includes/header.php
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <?php
  include_once "meta/meta.php";
@ -19,5 +20,5 @@
  <link rel="stylesheet" href="<?= $URLcorrection ?>css/padding.css">
  <link rel="stylesheet" type="text/css" href="<?= $URLcorrection ?>fontawesome/css/all.min.css">
 </head>
-  <body>

+<body>
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,49 @@
+const carouselContainer = document.querySelector('.carousel-container');
+const imageRow = document.querySelector('.image-row');
+let imageItems = imageRow.querySelectorAll('.col-md-3');
+const numberOfVisible = 4; // Number of images to show at a time
+let scrollPosition = 0;
+let imageWidth;
+const slideDuration = 1000; // Time in milliseconds for one slide (adjust as needed)
+const slideInterval = 5000; // Time in milliseconds between slides (adjust as needed)
+let isAnimating = false;
+
+function updateCarousel() {
+    if (imageItems.length > 0) {
+        imageWidth = imageItems[0].offsetWidth;
+    }
+}
+
+function slideCarousel() {
+    if (!isAnimating && imageWidth) {
+        isAnimating = true;
+        scrollPosition += imageWidth;
+        imageRow.style.transform = `translateX(-${scrollPosition}px)`;
+
+        setTimeout(() => {
+            const firstItem = imageRow.firstElementChild;
+            imageRow.appendChild(firstItem);
+            imageRow.style.transition = 'none'; // Temporarily disable transition for the reset
+            imageRow.style.transform = `translateX(0px)`;
+            scrollPosition = 0;
+            // Force reflow to apply the style change immediately
+            imageRow.offsetHeight;
+            imageRow.style.transition = ''; // Re-enable the transition
+            imageItems = imageRow.querySelectorAll('.col-md-3');
+            isAnimating = false;
+        }, slideDuration);
+    }
+}
+
+function startSlidingCarousel() {
+    setInterval(slideCarousel, slideInterval);
+}
+
+function initializeCarousel() {
+    updateCarousel();
+    startSlidingCarousel();
+
+    window.addEventListener('resize', updateCarousel);
+}
+
+initializeCarousel();
--- a/sections/about-us.php
+++ b/sections/about-us.php
@ -8,7 +8,7 @@
 						<p>For over two decades, since 2003, we've been keen on providing exceptional roofing services. Our journey in the trade has equipped us with a wealth of knowledge and skill that allows us to deliver results that stand alongside the very best. We value the trust our domestic and commercial clients place in us, and we strive to go the extra mile on every job. Our process kicks off with a detailed survey, where we take the time to explain everything clearly and provide photographic evidence for your peace of mind. You'll also receive a comprehensive written estimate, ensuring complete transparency. We're confident in our work and are happy to provide references.</p>
 					</div>
 				</div>
-					<div class="row">
+				<div class="row padding-bottom-100">
 					<div class="col-lg-6 col-sm-12 tabulation-2 mt-4">
 						<ul class="nav nav-pills nav-fill d-md-flex d-block">
 							<li class="nav-item mb-md-0 mb-2">
--- a/sections/counter.php
+++ b/sections/counter.php
@ -42,7 +42,7 @@
    </section>-->


-    <section class="ftco-counter" id="section-counter">
+<!--<section class="ftco-counter" id="section-counter">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
@ -51,4 +51,32 @@
      </div>
    </div>
  </div>
+</section>-->
+
+<section class="ftco-counter" id="section-counter">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="carousel-container">
+          <div class="image-row continuous-scroll">
+            <div class="col-md-3">
+              <img src="<?= $URLcorection ?>images/projects/1.webp" alt="Image 1" class="image-item">
+            </div>
+            <div class="col-md-3">
+              <img src="<?= $URLcorection ?>images/projects/2.webp" alt="Image 2" class="image-item">
+            </div>
+            <div class="col-md-3">
+              <img src="<?= $URLcorection ?>images/projects/3.webp" alt="Image 3" class="image-item">
+            </div>
+            <div class="col-md-3">
+              <img src="<?= $URLcorection ?>images/projects/4.webp" alt="Image 4" class="image-item">
+            </div>
+            <div class="col-md-3">
+              <img src="<?= $URLcorection ?>images/projects/5.webp" alt="Image 5" class="image-item">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </section>