Agora, chegamos a nossa responsividade. Nós podemos ver através do inspecionar, que o nosso slide começa a dar problema em 1200px, que foi o tamanho fixo que colocamos nele. Vamos então no próprio componente do slide alterar isso nas configurações.
<>
<div className="d-flex flex-column align-items-center py-4">
<Splide
options={{
type: "loop",
perPage: 4,
perMove: 1,
width: 1200,
pagination: false,
breakpoints: {
1200: {
perPage: 2,
width: 600,
},
},
}}
>
{course?.map((course) => (
<SplideSlide key={course.id}>
<SlideCard courseContent={course} />
</SplideSlide>
))}
</Splide>
</div>
</>
Nós sabemos que agora a próxima quebra que teremos será em 600px, pois foi o novo width que nós colocamos. Vamos então fazer a sua manipulação
<>
<div className="d-flex flex-column align-items-center py-4">
<Splide
options={{
type: "loop",
perPage: 4,
perMove: 1,
width: 1200,
pagination: false,
breakpoints: {
1200: {
perPage: 2,
width: 600,
},
1200: {
perPage: 1,
width: 300,
},
},
}}
>
{course?.map((course) => (
<SplideSlide key={course.id}>
<SlideCard courseContent={course} />
</SplideSlide>
))}
</Splide>
</div>
</>
Nós sabemos que agora, a nossa nova quebra acontece em 300px. Nós vamos então colocar mais um brekpoint para que possamos atingir nossa meta de 280px responsivo.
<>
<div className="d-flex flex-column align-items-center py-4">
<Splide
options={{
type: "loop",
perPage: 4,
perMove: 1,
width: 1200,
pagination: false,
breakpoints: {
1200: {
perPage: 2,
width: 600,
},
600: {
perPage: 1,
width: 300,
},
600: {
width: 250,
},
},
}}
>
{course?.map((course) => (
<SplideSlide key={course.id}>
<SlideCard courseContent={course} />
</SplideSlide>
))}
</Splide>
</div>
</>
Agora, o nosso slideCard também tem algumas quebras visuais ao longo dos breakpoints, vamos então no estilo de slideCard.
Quando a gente chega em “1200px” o nosso margin-left não é suficiente, então vamos aumentar um pouco.
@media (max-width: 1200px) {
.slide {
margin-left: 20px;
}
}
Agora, quando chega em “640px” ele também fica estranho, só que fica demais, nós iremos agora diminuir o nosso margin-left.
@media (max-width: 640px) {
.slide {
margin-left: 10px;
}
}
Agora, a nossa última quebra acontece a partir de “300px”, por conta do width que é fixo, então não consegue chegar aos 280px de responsividade de uma boa forma.
@media (max-width: 300px) {
.slide {
width: 100%;
margin-left: 0;
}
}
Agora nós conseguimos ver que ele está bem responsivo. Também sabemos que ele tem uma quebra bem feia em 250px. Só que, o mínimo é 280, então estar feio em 250px não é tão importate para nós.
Agora, existe um detalhe importante para a nossa responsividade. As nossas categorias nem sempre vão ter 4 cursos, as vezes elas podem ter apenas 1. Então nós temos que fazer uma adaptação ao nosso slide para que ele tenha o número de slides por página e também o width dinâmico.
Nós conseguimos isso de forma simples, é só descobrir quantos slides nós vamos ter na nossa props de course. Vamos fazer um contador e colocar esse contador como o número de slides por página. (Faremos isso acima do return)
let slideCount = 0;
if (course.length > 4) {
slideCount = 4;
} else if (course) {
slideCount = course.length;
}
Agora, nós podemos colocar o “perPage” do geral como o slideCount
options={{
type: "loop",
perPage: slideCount,
perMove: 1,
width: 1200,
pagination: false,
breakpoints: {
1200: {
perPage: 2,
width: 600,
},
640: {
width: 300,
perPage: 1,
},
300: {
width: 250,
},
},
}}
Agora, nós vamos colocar o width com uma conta simples. Nós queremos que com 4 ele fique em 1200px, então nós iremos multiplicar o slideCount por 300.
options={{
type: "loop",
perPage: slideCount,
perMove: 1,
width: slideCount * 300,
pagination: false,
breakpoints: {
1200: {
perPage: slideCount >= 2 ? 2 : 1,
width: slideCount >= 2 ? 640 : 300,
},
640: {
perPage: 1,
width: 300,
},
300: {
width: 250,
},
},
}}
Com isso, nós teremos os slides sendo responsivos. Nós só iremos precisar fazer isso 1 vez no nosso brekpoint, que será em “1200”. Pois abaixo disso nós teremos apenas 1 slide em qualquer momento, então não é necessário fazer mais.
Nós vamos fazer que o “prePage” e o width agora sejam condicioanis. Vamos verificar se ele está de acordo com a condição, se não estiver, nós iremos colocar limitações.
breakpoints: {
1200: {
perPage: slideCount >= 2 ? 2 : 1,
width: slideCount >= 2 ? 640 : 300,
},
640: {
width: 300,
perPage: 1,
},
300: {
width: 250,
},
},
Agora nós vamos manipular as setas e a opção de segurar e passar, chamada “drag”. Nós vamos verificar se o número total de slides é maior que 4, pois se for, nós podemos permitir que tenha a passagem de cards, mas se não for, não faz sentido a pessoa poder passar os slides, pois vão ficar nos mesmos slides.
options={{
type: "loop",
perPage: slideCount,
perMove: 1,
width: slideCount * 300,
pagination: false,
arrows: course.length > 4 ? true : false,
drag: course.length > 4 ? true : false,
breakpoints: {
1200: {
perPage: slideCount >= 2 ? 2 : 1,
width: slideCount >= 2 ? 640 : 300,
},
640: {
perPage: 1,
width: 300,
},
300: {
width: 250,
},
},
}}
Nós precisamos fazer a mesma coisa com 1200, pois a partie de 1200 nós vamos ter 2 por vez, então se for maior que 2, vamos poder liberar as setas e o “drag”
1200: {
perPage: slideCount >= 2 ? 2 : 1,
width: slideCount >= 2 ? 640 : 300,
arrows: course.length > 2 ? true : false,
drag: course.length > 2 ? true : false,
},
E por último, faremos com 640, pois se nós tivermos mais de 1 curso no array, nós vamos poder passar os slides.
640: {
perPage: 300,
width: 1,
arrows: course.length > 1 ? true : false,
drag: course.length > 1 ? true : false,
},
Com isso, nós temos o slide 100% responsivo, funcional de acordo com os números de slides que temos e também configurado. Nós ainda não temos os caminhos que precisamos para poder clicar no slide e ir para o curso, mas faremos logo logo.