Este é um placeholder de código customizado. Mude para a Pré-visualização ou publique a página para ver como seu código funciona.
Dê clique duplo para editar
<style>
main {
/* min-width: 427px; */
/* height: 80vh; */
display: flex;
flex-direction: column;
align-items: center;
}
.swiper {
width: 100%;
height: auto;
/* max-width: 400px; */
font-family: "DM Sans";
}
.swiper-slide {
font-size: 16px;
background: #fff;
display: flex !important;
justify-content: center;
align-items: center;
height: auto !important;
border-radius: 20px;
min-width: 310px;
}
.card {
padding: 40px;
width: 100%;
height: auto;
/* background-color: aliceblue; */
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
gap: 20px;
}
.card>div {
/* background-color: aqua; */
width: fit-content;
height: auto;
display: flex;
flex-direction: row;
align-items: end;
justify-content: start;
position: relative;
gap: 20px;
}
.card>div>div{
width: fit-content;
}
.card> div .img{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 35%;
max-height: 230px;
}
.card> div .img img{
width: 100%;
object-fit: cover;
border-radius: 100%;
border: 4px solid var(--cor-destaque) !important;
}
.card > .img-logo-empresa{
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
width: 100%;
height: 60px;
}
.card> .img-logo-empresa img{
max-width: 120px;
height: 100%;
object-fit: contain;
}
.carrossel-logo-linkedin{
width: 25px;
position: absolute;
top: 15px;
right: 15px;
}
p.carrossel-nome{
font-weight: bold;
font-size: 15px;
width: fit-content;
}
p.sobrenome{
font-weight: bold;
font-size: 16px;
width: 100%;
padding: 0px;
border: none;
color: var(--cor-destaque) !important;
}
p.carrossel-cargo{
font-weight: 500;
font-size: 16px;
color: #000;
width: fit-content;
}
@media screen and (max-width: 570px) {
.swiper-botoes{
display:#fff !important;
}
.carrossel-logo-linkedin{
width: 28px;
position: absolute;
top: 10px;
right: 10px;
}
.carrossel-nome{
font-weight: bold;
font-size: 22px;
}
.carrossel-cargo{
font-weight: 500;
font-size: 15px;
color: #002080;
}
div p{
font-size: 14px;
}
.card {
padding: 20px;
gap: 15px;
}
}
.menu-swiper{
display: flex;
flex-direction: row;
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.swiper-botoes{
background-color: #d4d9f2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 30px;
width: 100px;
/* padding: 5px; */
}
/* Estilo da navegação (botões anterior e próximo) */
.swiper-button-next-person,
.swiper-button-prev-person {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
/* Cor do ícone */
width: 80px !important; /* Largura do botão */
height: 40px !important; /* Altura do botão */
}
.swiper-button-next-person{
border-radius: 0 30px 30px 0;
fill: #002080;
}
.swiper-button-prev-person > path, .swiper-button-prev-person > path {
fill: #002080 !important;
}
.swiper-button-prev-person{
border-radius: 30px 0px 0px 30px;
}
.swiper-button-next-person:hover,
.swiper-button-prev-person:hover {
background-color: #002080 !important; /* Fundo ao passar o mouse */
}
/* Estilo da paginação (pontos) */
.swiper-pagination-bullet {
opacity: 0.5 !important; /* Opacidade dos pontos */
width: 10px !important; /* Largura dos pontos */
height: 10px !important; /* Altura dos pontos */
border-radius: 5px !important;
}
.swiper-pagination-bullet-active {
background-color: #002080 !important; /* Cor dos pontos ativos */
opacity: 1 !important; /* Opacidade dos pontos ativos */
}
.swiper-button-disabled path{
fill: #d4d9f2 !important;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<main>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://media.licdn.com/dms/image/v2/D4D03AQEHwW3YNcSviA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1720204861953?e=1744243200&v=beta&t=u8wR8VB5nGJ5X5j7WLcu9Uw2wXq34eOg223QmYxJ6m0" alt="">
</div>
<div>
<p class="carrossel-nome">HUGO</p><p class="sobrenome">AZEVEDO</p>
<p class="carrossel-cargo">CEO da HopAI</p>
</div>
<a href="https://www.linkedin.com/in/hugocazevedo/" target="_blank"><img class="carrossel-logo-linkedin" src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/c65835ad-6e3f-47e8-b8ae-fd0cc955c4f8.png" alt=""></a>
</div>
<div>
<p>Líder em Inteligência Artificial com mais de 18 anos de experiência, é fundador e CEO da HopAI, empresa especializada em soluções de IA para grandes organizações. Recebeu 10 prêmios internacionais por inovação e também é professor de IA em cursos de pós-graduação da PUC-MG, formando futuros profissionais e líderes na área.</p>
</div>
<div class="img-logo-empresa">
<img src="https://th.bing.com/th/id/OIP.gLjEDDu7h9pPgnwvIbEXRQAAAA?rs=1&pid=ImgDetMain" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://media.licdn.com/dms/image/v2/D4D03AQEtw8rsQwtmLw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1726590371061?e=1744243200&v=beta&t=gQ7piVi4gdX4EDfVUFS0Q-wfXuXF_KD8g9KFNJkTstw" alt="">
</div>
<div>
<p class="carrossel-nome">ALEXANDRE</p><p class="sobrenome">BERNARDES</p>
<p class="carrossel-cargo">Head de alianças na SoftExpert</p>
</div>
<a href="https://www.linkedin.com/in/bernardesalexandre/" target="_blank"><img class="carrossel-logo-linkedin" src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/c65835ad-6e3f-47e8-b8ae-fd0cc955c4f8.png" alt=""></a>
</div>
<div>
<p>Eng. da Computação pela UDESC, com duas Pós-Graduações em Negócios e Mestrado em Ensino (Tecnologias Educacionais / Engenharia do Conhecimento) Passagens pela Datasul, grupo TOTVS, Borrachas Vipal, Anima, Unimed do Brasil, Globo e EMS. Mentor de Startups e Negócios, Consultor de Transformação Digital, Empreendedor e Investidor de 9 empresas, com 4 exits.</p>
</div>
<div class="img-logo-empresa">
<img src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/735afc6e-0bb6-479a-95de-8d248d9bb1d3.png" alt="">
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="menu-swiper">
<div class="swiper-pagination-person"></div>
<div class="swiper-botoes">
<div class="swiper-button-prev-person">
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.72476 10.0001L10.0748 17.3501C10.3248 17.6001 10.4456 17.8918 10.4373 18.2251C10.4289 18.5584 10.2998 18.8501 10.0498 19.1001C9.79976 19.3501 9.50809 19.4751 9.17476 19.4751C8.84142 19.4751 8.54976 19.3501 8.29976 19.1001L0.599756 11.4251C0.399756 11.2251 0.249756 11.0001 0.149756 10.7501C0.0497559 10.5001 -0.000244141 10.2501 -0.000244141 10.0001C-0.000244141 9.75011 0.0497559 9.50011 0.149756 9.25011C0.249756 9.00011 0.399756 8.77511 0.599756 8.57511L8.29976 0.87511C8.54976 0.62511 8.84559 0.504277 9.18726 0.51261C9.52892 0.520944 9.82476 0.65011 10.0748 0.90011C10.3248 1.15011 10.4498 1.44178 10.4498 1.77511C10.4498 2.10844 10.3248 2.40011 10.0748 2.65011L2.72476 10.0001Z" fill="#040713"/>
</svg>
</div>
<div class="swiper-button-next-person">
<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.47511 10L1.12511 2.65C0.87511 2.4 0.754277 2.10417 0.76261 1.7625C0.770944 1.42083 0.90011 1.125 1.15011 0.875C1.40011 0.625 1.69594 0.5 2.03761 0.5C2.37928 0.5 2.67511 0.625 2.92511 0.875L10.6001 8.575C10.8001 8.775 10.9501 9 11.0501 9.25C11.1501 9.5 11.2001 9.75 11.2001 10C11.2001 10.25 11.1501 10.5 11.0501 10.75C10.9501 11 10.8001 11.225 10.6001 11.425L2.90011 19.125C2.65011 19.375 2.35844 19.4958 2.02511 19.4875C1.69178 19.4792 1.40011 19.35 1.15011 19.1C0.90011 18.85 0.77511 18.5542 0.77511 18.2125C0.77511 17.8708 0.90011 17.575 1.15011 17.325L8.47511 10Z" fill="#040713"/>
</svg>
</div>
</div>
</div>
</main>
<script>
(function () {
var script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js";
script.async = true; // Isso torna o script assíncrono
script.onload = function () {
// Inicialize o Swiper após o carregamento do script
const swiper = new Swiper(".swiper", {
// Optional parameters
slidesPerView: 2,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination-person",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next-person",
prevEl: ".swiper-button-prev-person",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
// Configuração de breakpoints
breakpoints: {
// Quando a largura da tela for >= 320px
200: {
slidesPerView: 1, // 1 slide no mobile
spaceBetween: 20
},
700: {
slidesPerView: 2, // 2 slides no desktop
spaceBetween: 30
}
}
});
};
document.head.appendChild(script);
})();
</script>
