diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css index 028e035..a68ac78 100644 --- a/ecommerce/fashion_website/pages/page.css +++ b/ecommerce/fashion_website/pages/page.css @@ -183,9 +183,10 @@ nav.menu .sub-menu li{ } /*---------- header ----------*/ .dotgrid .wrapper{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 30px; + display: var(--display,grid); + --grid-col:175px; + grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col),100%), 1fr)); + gap: var(--gutter, 30px); } .dotgrid .dot-image{ position: relative; @@ -499,6 +500,29 @@ form.search :where(i:last-child){ overflow: hidden; text-overflow: ellipsis; } +/*----- product -----*/ +.product .wrapper{ + --grid-col:331px +} +.product .main-image img{ + width: 100%; +} +.product .outer-thumb{ + display: none; +} +.product .outer-thumb .item{ + height: fit-content !important; + cursor: pointer; +} +.product .thumb-wrap{ + position: relative; + width: 70px; + height: 90px; +} +.product .custom-pagination{ + position: relative; + height: 40px; +} @@ -507,14 +531,33 @@ form.search :where(i:last-child){ - - - - - - - - +@media(min-width:481px){ + .product.wrapper{ + --gutter:60px; + } + .product.dotgrid .image{ + position: relative; + max-width: 500px; + width: 100%; + margin: 0 auto; + height: min-content; + overflow: hidden; + } + .product .outer-main{ + width: calc(100% -85px); + height: 100%; + margin: 0 0 0 85px; + } + .product .outer-thumb{ + display: block; + position: absolute; + top: 0; + left: 0; + } + .custom-pagination{ + display: none; + } +} diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html index 0089c7b..d6bfa2f 100644 --- a/ecommerce/fashion_website/pages/page.html +++ b/ecommerce/fashion_website/pages/page.html @@ -8,6 +8,7 @@ +
@@ -182,18 +183,6 @@
-
-
-
- -
-
-
@@ -204,9 +193,65 @@
+
+
+
+ +
+
+
- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -259,6 +304,7 @@ + \ No newline at end of file diff --git a/ecommerce/fashion_website/pages/page.js b/ecommerce/fashion_website/pages/page.js index dc8e371..c181730 100644 --- a/ecommerce/fashion_website/pages/page.js +++ b/ecommerce/fashion_website/pages/page.js @@ -1,3 +1,4 @@ +//navbar const openBtn = document.querySelectorAll('[trigger-button]'); const closeBtn = document.querySelectorAll('[close-button]'); const overlay = document.querySelector('[data-overlay]'); @@ -17,8 +18,7 @@ for (let x = 0; x < openBtn.length; x++){ targetEl.querySelector('[close-button]').addEventListener('click',openData); overlay.addEventListener('click', openData); } - - +//submenu const subMenu = document.querySelectorAll('.child-trigger'); subMenu.forEach((menu) => menu.addEventListener('click', function(e){ e.preventDefault(); @@ -27,4 +27,26 @@ const subMenu = document.querySelectorAll('.child-trigger'); if(this.closest('.has-child').classList != 'active'){ this.closest('.has-child').classList.toggle('active'); } - })) \ No newline at end of file + })) + +//swiper product +const thumbImage = new Swiper('.thumbnail-image', { + //loop: true, + direction:'vertical', + spaceBetween: 25, + slidePerView: 1, + freeMode: true, + watchSlideProgress: true, +}); +const mainImage = new Swiper('.main-image', { + loop: true, + autoHeight: true, + + pagination:{ + el: '.swiper-pagination', + clickable:true, + }, + thumbs:{ + swiper: thumbImage, + }, +});