Carousel now looking normal

fac31 · Apr 2, 2024 · 46e8263 · 46e8263
1 parent 1cc11e0
commit 46e8263
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 54 deletions.
diff --git a/Alien.webp b/Alien.webp
diff --git a/Berther.webp b/Berther.webp
diff --git a/Chimney Pot.webp b/Chimney Pot.webp
diff --git a/Hector.webp b/Hector.webp
diff --git a/Pedalo boat.webp b/Pedalo boat.webp
diff --git a/Rock.webp b/Rock.webp
diff --git a/Roger Moore.webp b/Roger Moore.webp
diff --git a/Rupert.webp b/Rupert.webp
diff --git a/Shai-Hulud.webp b/Shai-Hulud.webp
diff --git a/Space pig.webp b/Space pig.webp
diff --git a/cesspit.webp b/cesspit.webp
diff --git a/packages.html b/packages.html
@@ -26,45 +26,67 @@ <h3>Our award winning packages are second to none and provide you with security,
         <h4>Join one of our trusted cosmic nomads on a personal trip as they sparodically shuffle around the galaxy:</h4>
 
             <div class="carousel-container">
-                <button id="prevBtn" onclick="prevSlide()">Previous</button>
-                <div id="carousel">
-                    <div class="slide active">Rupert the swinebelly. Previously a full-time marauder, Rupert has left his past behind to pursue a career as a travel guide.</div>
-                    <div class="slide">Xex-k7. Being only 7000 years old means Xex-k7 still has a passion for exploration. He is currently on a gap-century working with our travel team.</div>
-                    <div class="slide">Rock. What you see is what you get.</div>
-                    <div class="slide">Roger Moore. Frequently tours the nebula region, enjoys long walks in the park on days off.</div>
-                    <div class="slide">Hector. Currently dead and awaiting reincarnation, will not be available until next week.</div>    
+                <div class="carousel">
+                    <div class="slides">
+                        <img src="Rupert.webp" alt="Rupert the swinebelly. Previously a full-time marauder, Rupert has left his past behind to pursue a career as a travel guide.">
+                        <img src="Alien.webp" alt="Xex-k7. Being only 7000 years old means Xex-k7 still has a passion for exploration. He is currently on a gap-century working with our travel team.">
+                        <img src="Rock.webp" alt="Rock. What you see is what you get.">
+                        <img src="Roger Moore.webp" alt="Roger Moore. Frequently tours the nebula region, enjoys long walks in the park on days off.">
+                        <img src="Hector.webp" alt="Hector. Currently dead and awaiting reincarnation, will not be available until next week.">
+                    </div>
+                    <button class="prev">Previous</button>
+                    <button class="next">Next</button>
+
+                    <ol>
+                        <li>Rupert the swinebelly. Previously a full-time marauder, Rupert has left his past behind to pursue a career as a travel guide.</li>
+                        <li>Xex-k7. Being only 7000 years old means Xex-k7 still has a passion for exploration. He is currently on a gap-century working with our travel team.</li>
+                        <li>Rock. What you see is what you get.</li>
+                        <li>Roger Moore. Frequently tours the nebula region, enjoys long walks in the park on days off.</li>
+                        <li>Hector. Currently dead and awaiting reincarnation, will not be available until next week.</li>
+                    </ol>
                 </div>
-                <button id="nextBtn" onclick="nextSlide()">Next</button>
-            </div>
     </section>
 
     <section>
         <h4>Take to the stars with one of our cruise liners where you can meet other morons with a similar appetite for interdimensional travel:</h4>
 
-            <div class="carousel-container">
-                <button id="prevBtn" onclick="prevSlide()">Previous</button>
-                <div id="carousel">
-                    <div class="slide active">The Big-Berther 700. With a 24/7 meat buffet, this space cruiser holds 500 human passengers or 27,000 live Lindt Chocolate bunnies depending on which is your preferred measurement.</div>
-                    <div class="slide">Chimney Pot. Whilst the ship's name may be unflattering, I can assure you this is the height of luxerious travelling. No photo available (It's not 'ugly' in the convential sense, would prefer if you didn't judge a book by it's cover).</div>
-                    <div class="slide">Cesspit. No dancing around this one, she's a rough cruiser and uninhabitable if you stay on for too long, excellent price however.</div>
-                </div>
-                <button id="nextBtn" onclick="nextSlide()">Next</button>
+        <div class="carousel">
+            <div class="slides">
+                <!-- Images -->
+                <img src="Berther.webp" alt="The Big-Berther 700. With a 24/7 meat buffet, this space cruiser holds 500 human passengers or 27,000 live Lindt Chocolate bunnies depending on which is your preferred measurement.">
+                <img src="Chimney Pot.webp" alt="Chimney Pot. Whilst the ship's name may be unflattering, I can assure you this is the height of luxerious travelling. No photo available (It's not 'ugly' in the convential sense, would prefer if you didn't judge a book by it's cover).">
+                <img src="cesspit.webp" alt="Cesspit. No dancing around this one, she's a rough cruiser and uninhabitable if you stay on for too long, excellent price however.">
             </div>
+            <button class="prev">Previous</button>
+            <button class="next">Next</button>
+                <ol>
+                    <li>The Big-Berther 700. With a 24/7 meat buffet, this space cruiser holds 500 human passengers or 27,000 live Lindt Chocolate bunnies depending on which is your preferred measurement.</li>
+                    <li>Chimney Pot. Whilst the ship's name may be unflattering, I can assure you this is the height of luxerious travelling. No photo available (It's not 'ugly' in the convential sense, would prefer if you didn't judge a book by it's cover).</li>
+                    <li>Cesspit. No dancing around this one, she's a rough cruiser and uninhabitable if you stay on for too long, excellent price however.</li>
+                </ol>
+        </div>
     </section>
 
     <section>
         <h4>If the above don't float your boat, we do have the c-suite travel packages attached below:</h4>
         <p>While costing a pretty penny, these methods of travel are exceptional and at the height of stupidity should you be willing to fork out a small fortune.</p>
-
-            <div class="carousel-container">
-                <button id="prevBtn" onclick="prevSlide()">Previous</button>
-                <div id="carousel">
-                    <div class="slide active">Pedalo. Unconventionally attractive and our most popular form of luxery travel, the pedalo comes fitted with a highly amusing fibreglass swan bodykit and peddles so you may travel at the speed you desire.</div>
-                    <div class="slide">Pig. Pig riding has never been so avant-garde, with a potbelly pig between your thighs you can't help but smile as you pull its curly tail and listen to it oink and squeal. Excellent source of protein should you get lost additionally.</div>
-                    <div class="slide">Wormhole. Chase the stars on a galactic Shai-Hulud, life insurance and a spare pair of underpants recommended.</div>
-                </div>
-                <button id="nextBtn" onclick="nextSlide()">Next</button>
+
+        <div class="carousel">
+            <div class="slides">
+                <!-- Images -->
+                <img src="Pedalo boat.webp" alt="Pedalo. Unconventionally attractive and our most popular form of luxery travel, the pedalo comes fitted with a highly amusing fibreglass swan bodykit and peddles so you may travel at the speed you desire.">
+                <img src="Space pig.webp" alt="Pig. Pig riding has never been so avant-garde, with a potbelly pig between your thighs you can't help but smile as you pull its curly tail and listen to it oink and squeal. Excellent source of protein should you get lost additionally.">
+                <img src="Shai-Hulud.webp" alt="Wormhole. Chase the stars on a galactic Shai-Hulud, life insurance and a spare pair of underpants recommended.">
             </div>
+            <button class="prev">Previous</button>
+            <button class="next">Next</button>
+
+            <ol>
+                <li>Pedalo. Unconventionally attractive and our most popular form of luxery travel, the pedalo comes fitted with a highly amusing fibreglass swan bodykit and peddles so you may travel at the speed you desire.</li>
+                <li>Pig. Pig riding has never been so avant-garde, with a potbelly pig between your thighs you can't help but smile as you pull its curly tail and listen to it oink and squeal. Excellent source of protein should you get lost additionally.</li>
+                <li>Wormhole. Chase the stars on a galactic Shai-Hulud, life insurance and a spare pair of underpants recommended.</li>
+            </ol>
+        </div>
     </section>
 </body>
 </html>
diff --git a/reviewImage1.webp b/reviewImage1.webp
diff --git a/reviewImage2.webp b/reviewImage2.webp
diff --git a/script.js b/script.js
@@ -1,20 +1,18 @@
-let currentSlide = 0;
-const slides = document.querySelectorAll('.slide');
-const totalSlides = slides.length;
+// JavaScript for carousel functionality
+const prevButton = document.querySelector('.prev');
+const nextButton = document.querySelector('.next');
+const slides = document.querySelector('.slides');
 
-function showSlide(n) {
-  slides.forEach((slide) => slide.classList.remove('active'));
-  slides[n].classList.add('active');
-}
-
-document.getElementById('prevBtn').addEventListener('click', function() {
-  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
-  showSlide(currentSlide);
-});
-
-document.getElementById('nextBtn').addEventListener('click', function() {
-  currentSlide = (currentSlide + 1) % totalSlides;
-  showSlide(currentSlide);
+prevButton.addEventListener('click', () => {
+    slides.scrollBy({
+        left: -slides.offsetWidth,
+        behavior: 'smooth'
+    });
 });
 
-showSlide(currentSlide);
+nextButton.addEventListener('click', () => {
+    slides.scrollBy({
+        left: slides.offsetWidth,
+        behavior: 'smooth'
+    });
+});
diff --git a/style.css b/style.css
@@ -215,19 +215,56 @@ code {
 /*  =================================== */
 /* Carousel styling */
 
-.carousel-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.carousel {
+    position: relative;
+    max-width: 600px; /* Set maximum width */
+    margin: 0 auto; /* Center the carousel */
+}
 
-  .slide {
-    display: none;
-  }
+/* CSS for slides */
+.slides {
+    display: flex; /* Arrange slides in a row */
+    overflow-x: auto; /* Enable horizontal scrolling */
+    scroll-snap-type: x mandatory; /* Enable snap scrolling */
+}
 
-  .slide.active {
-    display: block;
-  }
+/* CSS for individual slide (image) */
+.slides img {
+    flex: 0 0 auto; /* Disable flex grow and shrink */
+    scroll-snap-align: start; /* Snap to start of each slide */
+    width: 100%; /* Fill the container width */
+    height: auto; /* Maintain aspect ratio */
+}
+
+/* CSS for navigation buttons */
+.prev,
+.next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 10px 20px;
+    background-color: #9C002F;
+    color: #ededed;
+    border: none;
+    cursor: pointer;
+    font-family: monospace;
+    border-radius: 5px;
+}
+
+.next {
+    right: 0;
+}
+.prev {
+    left: 0;
+}
+
+.next:hover {
+    background-color: #5b5b5b;
+}
+
+.prev:hover {
+    background-color: #5b5b5b;
+}
 
 /* =============================================== */
 /* Review radio buttons */