Updated Front-end Logic

hoangsonww · Dec 19, 2023 · 6ed1d41 · 6ed1d41
1 parent 8f72e17
commit 6ed1d41
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -1136,12 +1136,12 @@ <h3 class="portfolio__title">The MovieVerse Database</h3>
                 <!--==================== PORTFOLIO 2 ====================-->
 
                 <div class="portfolio__content grid swiper-slide">
-                    <img src="./packages/images/portfolio1.jpg" alt="" class="portfolio__img">
+                    <img src="./packages/images/todo.png" alt="" class="portfolio__img">
 
                     <div class="portfolio_">
-                        <h3 class="portfolio__title">The RecipeGenie Database</h3>
-                        <p class="portfolio__description">Welcome to The Recipe Genie App - The Ultimate Recipe Assistant, your personal culinary guide and portal to a world of delicious dishes.</p>
-                        <a href="https://hoangsonww.github.io/RecipeGenie-App/" class="button button--flex button--small portfolio__button">
+                        <h3 class="portfolio__title">The StickyNotes App</h3>
+                        <p class="portfolio__description">Welcome to The StickyNotes App, your new digital space for quick notes, brainstorming ideas, and keeping track of tasks.</p>
+                        <a href="https://hoangsonww.github.io/The-StickyNotes-App/" class="button button--flex button--small portfolio__button">
                             Demo
                             <i class="uil uil-arrow-right button__icon"></i>
                         </a>
@@ -1166,12 +1166,12 @@ <h3 class="portfolio__title">The WeatherMate App</h3>
                 <!--==================== PORTFOLIO 4 ====================-->
 
                 <div class="portfolio__content grid swiper-slide">
-                    <img src="./packages/images/todo.png" alt="" class="portfolio__img">
+                    <img src="./packages/images/portfolio1.jpg" alt="" class="portfolio__img">
 
                     <div class="portfolio_">
-                        <h3 class="portfolio__title">The StickyNotes App</h3>
-                        <p class="portfolio__description">Welcome to The StickyNotes App, your new digital space for quick notes, brainstorming ideas, and keeping track of tasks.</p>
-                        <a href="https://hoangsonww.github.io/The-StickyNotes-App/" class="button button--flex button--small portfolio__button">
+                        <h3 class="portfolio__title">The RecipeGenie Database</h3>
+                        <p class="portfolio__description">Welcome to The Recipe Genie App - The Ultimate Recipe Assistant, your personal culinary guide and portal to a world of delicious dishes.</p>
+                        <a href="https://hoangsonww.github.io/RecipeGenie-App/" class="button button--flex button--small portfolio__button">
                             Demo
                             <i class="uil uil-arrow-right button__icon"></i>
                         </a>

diff --git a/packages/js/main.js b/packages/js/main.js
@@ -98,22 +98,31 @@ modalCloses.forEach((modalClose) => {
 });
 
 /*==================== PORTFOLIO SWIPER  ====================*/
-let swiperPortfolio = new Swiper(".portfolio__container", {
-    cssMode: true,
+const swiperPortfolio = new Swiper('.portfolio__container', {
     loop: true,
-
+    loopAdditionalSlides: 3,
+    slidesPerView: 1, // Show only one slide at a time
+    spaceBetween: 3500, // You can adjust this value for spacing between slides
     navigation: {
-        nextEl: ".swiper-button-next",
-        prevEl: ".swiper-button-prev",
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
     },
-
     pagination: {
-        el: ".swiper-pagination",
+        el: '.swiper-pagination',
         clickable: true,
     },
-
-    /* mousewheel: true,
-    keyboard: true, */
+    mousewheel: true,
+    keyboard: true,
+    on: {
+        reachBeginning: function() {
+            this.loopDestroy(); // Destroy loop
+            this.loopCreate(); // Create loop again
+        },
+        reachEnd: function() {
+            this.loopDestroy(); // Destroy loop
+            this.loopCreate(); // Create loop again
+        }
+    }
 });
 
 /*==================== TESTIMONIAL ====================*/