From 5d2c0384057127fb8d39f96ad624fb14afb93942 Mon Sep 17 00:00:00 2001 From: Lindemberg Date: Mon, 1 Apr 2024 16:57:36 -0300 Subject: [PATCH 1/5] adicao da paginacao do carrossel --- script.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index ee37997..bc31344 100644 --- a/script.js +++ b/script.js @@ -163,10 +163,64 @@ window.addEventListener('resize', (e) => { }) // Função que constroi o Swiper (Carrossel) -function handleConstructionSwiper(slides) { - return swiper = new Swiper(".mySwiper", { - slidesPerView: slides, - spaceBetween: 32, +function handleConstructionSwiper() { + return new Swiper(".mySwiper", { + slidesPerView: 4, + parallax: true, + bulletActiveClass: true, + dynamicBullets: true, + updateOnWindowResize: true, + spaceBetween: 30, + rewind: true, + loop: false, + longSwipes: true, + grabCursor: true, + type: 'bullets', + freeMode: true, + freeModeMomentum: false, + freeModeMomentumRatio: 0.5, + freeModeMomentumBounce: false, + freeModeSticky: true, + freeMode: { + enabled: true, + sticky: true, + }, + // autoplay: { + // delay: 20000, + // }, + scrollbar: { + el: '.swiper-scrollbar', + draggable: true, + }, + controller: { + inverse: true, + }, + pagination: { + el: `.swiper-pagination`, + clickable: true, + }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }, + breakpoints: { + 480: { + slidesPerView: 1, + spaceBetween: 20, + }, + 768: { + slidesPerView: 2, + spaceBetween: 15, + }, + 1024: { + slidesPerView: 3, + spaceBetween: 20, + }, + 320: { + slidesPerView: 1, + spaceBetween: 5, + } + } }); } From 330d0ca0f6125ca478785e1e3d623387919ca791 Mon Sep 17 00:00:00 2001 From: Lindemberg Date: Mon, 1 Apr 2024 17:33:50 -0300 Subject: [PATCH 2/5] =?UTF-8?q?ajustes=20no=20tamanho=20dos=20cards,=20mas?= =?UTF-8?q?=20ainda=20necessita=20da=20sua=20corre=C3=A7=C3=A3o,=20n=C3=A3?= =?UTF-8?q?o=20achei=20o=20causador=20do=20espacamento=20extra?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 37 ------------------------------------- style.css | 6 ++++++ 2 files changed, 6 insertions(+), 37 deletions(-) diff --git a/script.js b/script.js index bc31344..24c2484 100644 --- a/script.js +++ b/script.js @@ -112,8 +112,6 @@ function handleCreateCard(elementDiv, json) { swiperDiv.appendChild(swiperWrapperDiv) elementDiv.appendChild(swiperDiv) - - handleWidth(window.innerWidth) }) } @@ -127,41 +125,6 @@ function handleSaveProduct(data) { localStorage.setItem('@devFashion:product', JSON.stringify(data)) } -// Função de verificação de tamnho para definir o numero de slides -function handleWidth(width) { - const sectionCollection = document.querySelectorAll('.section-collection') - let slideShow; - - if (width <= 750) { - slideShow = '3.5' - sectionCollection.forEach(item => item.style.margin = '0px 0px 10rem 5%') - } - - if (width <= 580) { - slideShow = '3' - } - - if (width <= 485) { - slideShow = '2.5' - } - - if (width <= 420) { - slideShow = '2' - } - - if (width > 750) { - slideShow = '4' - sectionCollection.forEach(item => item.style.margin = '0rem 5% 10rem') - } - - handleConstructionSwiper(slideShow) -} - -// Função que monitora o tamanho da tela -window.addEventListener('resize', (e) => { - handleWidth(e.target.innerWidth); -}) - // Função que constroi o Swiper (Carrossel) function handleConstructionSwiper() { return new Swiper(".mySwiper", { diff --git a/style.css b/style.css index 7084b38..0878ef9 100644 --- a/style.css +++ b/style.css @@ -105,6 +105,7 @@ button { .card { min-width: 150px; + max-width: 90%; } .card-collection { @@ -497,3 +498,8 @@ button { max-height: 30vw; } } +@media(min-width: 1300px){ + .card{ + max-width: 75%; + } +} From 535e99abcd6aff3498967f2eaf4e153d718d5001 Mon Sep 17 00:00:00 2001 From: Lindemberg Date: Mon, 1 Apr 2024 18:46:04 -0300 Subject: [PATCH 3/5] adicao na quantidade de cards em telas maiores adicionando um breakPoint --- script.js | 61 +++++++++++++++++++++++++++++++++++++------------------ style.css | 6 ------ 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/script.js b/script.js index 24c2484..2c19e8f 100644 --- a/script.js +++ b/script.js @@ -112,6 +112,8 @@ function handleCreateCard(elementDiv, json) { swiperDiv.appendChild(swiperWrapperDiv) elementDiv.appendChild(swiperDiv) + + handleWidth(window.innerWidth) }) } @@ -125,39 +127,54 @@ function handleSaveProduct(data) { localStorage.setItem('@devFashion:product', JSON.stringify(data)) } +// Função de verificação de tamnho para definir o numero de slides +function handleWidth(width) { + const sectionCollection = document.querySelectorAll('.section-collection') + let slideShow; + + if (width <= 750) { + slideShow = '3.5' + sectionCollection.forEach(item => item.style.margin = '0px 0px 10rem 5%') + } + + if (width <= 580) { + slideShow = '3' + } + + if (width <= 485) { + slideShow = '2.5' + } + + if (width <= 420) { + slideShow = '2' + } + + if (width > 750) { + slideShow = '4' + sectionCollection.forEach(item => item.style.margin = '0rem 5% 10rem') + } + + handleConstructionSwiper(slideShow) +} + +// Função que monitora o tamanho da tela +window.addEventListener('resize', (e) => { + handleWidth(e.target.innerWidth); +}) + // Função que constroi o Swiper (Carrossel) function handleConstructionSwiper() { return new Swiper(".mySwiper", { - slidesPerView: 4, - parallax: true, - bulletActiveClass: true, - dynamicBullets: true, updateOnWindowResize: true, spaceBetween: 30, - rewind: true, loop: false, - longSwipes: true, grabCursor: true, type: 'bullets', freeMode: true, - freeModeMomentum: false, - freeModeMomentumRatio: 0.5, - freeModeMomentumBounce: false, - freeModeSticky: true, - freeMode: { - enabled: true, - sticky: true, - }, - // autoplay: { - // delay: 20000, - // }, scrollbar: { el: '.swiper-scrollbar', draggable: true, }, - controller: { - inverse: true, - }, pagination: { el: `.swiper-pagination`, clickable: true, @@ -179,6 +196,10 @@ function handleConstructionSwiper() { slidesPerView: 3, spaceBetween: 20, }, + 1500: { + slidesPerView: 4, + spaceBetween: 20, + }, 320: { slidesPerView: 1, spaceBetween: 5, diff --git a/style.css b/style.css index 0878ef9..7084b38 100644 --- a/style.css +++ b/style.css @@ -105,7 +105,6 @@ button { .card { min-width: 150px; - max-width: 90%; } .card-collection { @@ -498,8 +497,3 @@ button { max-height: 30vw; } } -@media(min-width: 1300px){ - .card{ - max-width: 75%; - } -} From a7a0bbeb42236526b109150631aa894d0d716e4c Mon Sep 17 00:00:00 2001 From: Lindemberg Date: Mon, 1 Apr 2024 20:10:37 -0300 Subject: [PATCH 4/5] Fix layout, adicao de breakPoints e css --- script.js | 8 ++++++++ style.css | 12 ++++++++++++ 2 files changed, 20 insertions(+) diff --git a/script.js b/script.js index 2c19e8f..f9056fd 100644 --- a/script.js +++ b/script.js @@ -188,6 +188,14 @@ function handleConstructionSwiper() { slidesPerView: 1, spaceBetween: 20, }, + 500: { + slidesPerView: 2, + spaceBetween: 15, + }, + 600: { + slidesPerView: 2, + spaceBetween: 15, + }, 768: { slidesPerView: 2, spaceBetween: 15, diff --git a/style.css b/style.css index 7084b38..7fc4264 100644 --- a/style.css +++ b/style.css @@ -444,6 +444,18 @@ button { } +@media(max-width: 767px){ +.swiper-wrapper{ + height: 700px !important; +} +.card{ + max-height: 100%; +} +.card img{ + object-fit: cover; +} +} + @media(max-width: 450px){ .header-logo-icon{ height: 2.5rem; From c616afe8106271071bd82b63c131f483e67b4d4e Mon Sep 17 00:00:00 2001 From: Lindemberg Date: Tue, 2 Apr 2024 20:15:29 -0300 Subject: [PATCH 5/5] fix: swiper pagination --- script.js | 29 +++++++++++++++-------------- style.css | 12 ------------ 2 files changed, 15 insertions(+), 26 deletions(-) diff --git a/script.js b/script.js index f9056fd..adf01ba 100644 --- a/script.js +++ b/script.js @@ -165,6 +165,7 @@ window.addEventListener('resize', (e) => { // Função que constroi o Swiper (Carrossel) function handleConstructionSwiper() { return new Swiper(".mySwiper", { + slidesPerView: 4, updateOnWindowResize: true, spaceBetween: 30, loop: false, @@ -184,31 +185,31 @@ function handleConstructionSwiper() { prevEl: '.swiper-button-prev' }, breakpoints: { - 480: { - slidesPerView: 1, + 1300: { + slidesPerView: 4, spaceBetween: 20, }, - 500: { - slidesPerView: 2, - spaceBetween: 15, + 1024: { + slidesPerView: 4, + spaceBetween: 20, }, - 600: { - slidesPerView: 2, + 768: { + slidesPerView: 3, spaceBetween: 15, }, - 768: { - slidesPerView: 2, + 600: { + slidesPerView: 3, spaceBetween: 15, }, - 1024: { + 500: { slidesPerView: 3, - spaceBetween: 20, + spaceBetween: 15, }, - 1500: { - slidesPerView: 4, + 330: { + slidesPerView: 2, spaceBetween: 20, }, - 320: { + 300: { slidesPerView: 1, spaceBetween: 5, } diff --git a/style.css b/style.css index 7fc4264..7084b38 100644 --- a/style.css +++ b/style.css @@ -444,18 +444,6 @@ button { } -@media(max-width: 767px){ -.swiper-wrapper{ - height: 700px !important; -} -.card{ - max-height: 100%; -} -.card img{ - object-fit: cover; -} -} - @media(max-width: 450px){ .header-logo-icon{ height: 2.5rem;