From 658d8baf0002ae2be014bf732e25ba0b6b135a06 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Mon, 26 Jun 2023 19:56:54 -0500
Subject: [PATCH] added slide container

---
 ecommerce/furniture_website/index.html |  34 ++++++-
 ecommerce/furniture_website/main.js    |  18 ++++
 ecommerce/furniture_website/style.css  | 117 ++++++++++++++++++++++---
 3 files changed, 158 insertions(+), 11 deletions(-)

diff --git a/ecommerce/furniture_website/index.html b/ecommerce/furniture_website/index.html
index de1afed..5e621d9 100644
--- a/ecommerce/furniture_website/index.html
+++ b/ecommerce/furniture_website/index.html
@@ -202,9 +202,10 @@
         </div>
     </section>
 
+
     <section class="section new-arrival">
         <div class="new-arrival-title">
-            <h1>New Arrivals</h1>
+            <h1>Popular categories</h1>
             <p>All the latest picked from our store</p>
         </div>
         <div class="product-center">
@@ -329,6 +330,37 @@
         </div>
     </section>
 
+    <section id="gallery-container">
+        <div class="new-topic-text-2">
+            <h1>The Life at Home</h1>
+            <p>At your IKEY online store, you'll discover even more tips and ideas to make the most of every room in your home.</p>
+        </div>
+        <div class="gallery-container">
+            <i class='bx bx-chevron-left' id="back-btn"></i>
+                <div class="gallery">
+                <div>
+                    <span><img src="images/slide-1.jpg"></span>
+                    <span><img src="images/slide-2.jpg"></span>
+                    <span><img src="images/slide-3.jpg"></span>
+                </div>
+                <div>
+                    <span><img src="images/slide-4.jpg"></span>
+                    <span><img src="images/slide-5.jpg"></span>
+                    <span><img src="images/slide-6.jpg"></span>
+                </div>
+                <div>
+                    <span><img src="images/slide-7.jpg"></span>
+                    <span><img src="images/slide-8.jpg"></span>
+                    <span><img src="images/slide-9.jpg"></span>
+                </div>
+            </div>
+            <i class='bx bx-chevron-right' id="next-btn"></i>
+        </div>
+    </section>
+
+   
+
+
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.js"></script>
     <script src="swiper.js"></script>
diff --git a/ecommerce/furniture_website/main.js b/ecommerce/furniture_website/main.js
index 2e8acae..1083fe7 100644
--- a/ecommerce/furniture_website/main.js
+++ b/ecommerce/furniture_website/main.js
@@ -8,4 +8,22 @@ if(navBar){
 }
 
 
+let scrollcontainer = document.querySelector('.gallery');
+let backButton = document.getElementById('back-btn');
+let nextButton = document.getElementById('next-btn');
+
+scrollcontainer.addEventListener('wheel', (evt) =>{
+    evt.preventDefault();
+    scrollcontainer.scrollLeft += evt.deltaY;
+});
+
+nextButton.addEventListener('click', () =>{
+    scrollcontainer.style.scrollBehavior = 'smooth';
+    scrollcontainer.scrollLeft += 900;
+});
+backButton.addEventListener('click', () =>{
+    scrollcontainer.style.scrollBehavior = 'smooth';
+    scrollcontainer.scrollLeft -= 900;
+});
+
 
diff --git a/ecommerce/furniture_website/style.css b/ecommerce/furniture_website/style.css
index 12e6b04..dd863ee 100644
--- a/ecommerce/furniture_website/style.css
+++ b/ecommerce/furniture_website/style.css
@@ -318,8 +318,8 @@ li{
 }
 /*----------------*/
 .new-topic-text{
-    padding: 6rem 3rem;
-    margin: 5rem;
+    margin-left: 8rem;
+    margin-bottom: 8rem;
 }
 .new-topic-text h1{
     margin-bottom: 1.2rem;
@@ -336,7 +336,6 @@ li{
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 8rem;
 }
 .new-img{
     position: absolute;
@@ -344,7 +343,6 @@ li{
     height: 130%;
     z-index: -1;
     object-fit: cover;
-    margin-bottom: 5rem;
 }
 .new-text{
     padding-right: 20px;
@@ -451,12 +449,81 @@ li{
     color: var(--w);
     font-size: 1.5rem;
 }
+/*----- slide -----*/
+.new-topic-text-2{
+    margin-left: 8rem;
+    margin-bottom: 8rem;
+}
+.new-topic-text-2 h1{
+    font-size: 2.5rem;
+    margin-bottom: 1.2rem;
+}
+.new-topic-text-2 p{
+    font-size: 1.5rem;
+    color: #625750;
+}
+.gallery{
+    width: 1000px;
+    display: flex;
+    overflow-x: scroll;
+    scrollbar-width: none;
+}
+.gallery div{
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-gap: 20px;
+    padding: 10px;
+    flex: none;
+}
+.gallery div img{
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s;
+}
+.gallery-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#back-btn, #next-btn{
+    width: 50px;
+    cursor: pointer;
+    font-size: 3rem;
+}
+.gallery div img:hover{
+    transform:scale(1.05);
+    cursor: pointer;
+}
+
+
+
 
 
 
 
 
 /*----- respo -----*/
+@media(max-width: 1200px){
+    .new-img{
+        width: 90%;
+        height: 120%;
+    }
+    .new-text{
+        display: none;
+    }
+    .new-text-2{
+        display: none;
+    }
+    .new-text-3{
+        display: none;
+    }
+    .new-topic-text{
+        margin-left: 8rem;
+        margin-bottom: 8rem;
+        margin-right: 8rem;
+    }
+}
 @media(max-width: 1000px){
     .glide__slide--active .footer-left{
         top: 15%;
@@ -478,7 +545,14 @@ li{
     } 
     .section-category-2 .category-center-2 .category-box-2{
         width: 100%;
-    } 
+    }
+    .product-item{
+        width: 20rem;
+    }
+    .product-show img{
+        width: 15rem;
+        height: 15rem;
+    }
 }
 @media(max-width: 765px){
     .footer .footer-left h1{
@@ -488,17 +562,24 @@ li{
         height: 30rem;
         width: 100%;
     }
-    #back-btn, #next-btn{
-        display: none;
+    .new-img{
+        width: 80%;
+        height: 80%;
     }
-    .gallery div img{
-       display: none;
+    .new-topic-text{
+        margin-left: 8rem;
+        margin-bottom: 4rem;
+        margin-right: 8rem;
+    }
+    .new-topic-text-2{
+        margin-left: 8rem;
+        margin-right: 8rem;
     }
 }
 @media(max-width: 760px){
     .nav-list{
         position: fixed;
-        top: 15%;
+        top: 12%;
         left: -100%;
         flex-direction: column;
         align-items: flex-start;
@@ -553,6 +634,22 @@ li{
         margin: 0;
         padding: 0 3rem;
     }
+    .new-img{
+        width: 80%;
+        height: 60%;
+    }
+    .new-topic-text{
+        margin-left: 8rem;
+        margin-right: 8rem;
+    }
+}
+@media(max-width: 400px){
+    .new-topic{
+        display: none;
+    }
+    .new-topic-text{
+        display: none;
+    }
 }
 @media(max-width: 362px){
     .top-nav .display-flex{