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: 18px;
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: 25px;
}
.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: 20px;
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: #040713;
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: #040713;
}
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: #F4F6FC;
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: #040713;
}
.swiper-button-prev-person > path, .swiper-button-prev-person > path {
fill: #040713 !important;
}
.swiper-button-prev-person{
border-radius: 30px 0px 0px 30px;
}
.swiper-button-next-person:hover,
.swiper-button-prev-person:hover {
background-color: #dbe0eb !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: #040713 !important; /* Cor dos pontos ativos */
opacity: 1 !important; /* Opacidade dos pontos ativos */
}
.swiper-button-disabled path{
fill: #A9B4E5 !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/D4D03AQGvsLw95m0lUw/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1695757062903?e=1740614400&v=beta&t=6YJ9ASBOhDHEKfZu8MqHTcQdLldT4jvczvF7K3p-Tes" alt="">
</div>
<div>
<p class="carrossel-nome">ELVIS EVANGELISTA</p><p class="sobrenome">DA SILVA</p>
<p class="carrossel-cargo">Gerente de Tecnologia e Inovações</p>
</div>
<a href="https://www.linkedin.com/in/elvisesilva/" 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>Profissional com mais de 30 anos de experiência no setor sucroenergético, atuando em grandes empresas como Pedra, Tereos, Tonon e Nardini. Possui vasta experiência em gestão de TI, implantação de SAP S/4 Hana, e coordenação de projetos internacionais. Formado em Análise de Sistemas, com MBAs em Gestão Empresarial e Data Science.</p>
</div>
<div class="img-logo-empresa">
<img src="https://th.bing.com/th/id/R.14ba3634436e56fec6e44d6a516a134d?rik=MZeb7UHrtS15QQ&riu=http%3a%2f%2fintranet.nardini.ind.br%2fassets%2fimg%2fnardini_logotipo2.png&ehk=Blq1BcPSYYK0xyKb0p2MtJ60jvSn3Fx7mEBJHWDx6qI%3d&risl=&pid=ImgRaw&r=0" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/3f0aa83d-f49a-4928-9b63-8deab78572e1.jpg" alt="">
</div>
<div>
<p class="carrossel-nome">CLÉSIO RODRIGUES</p><p class="sobrenome">BARBOSA</p>
<p class="carrossel-cargo">Coordenador PMO e BPM</p>
</div>
<a href="https://www.linkedin.com/in/clesio-r-barbosa-8469a125/" 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>Profissional graduado em Ciências Contábeis e Administração, com ênfase em finanças, MBA em Gerenciamento de Projetos e certificação Black Belt.</p>
</div>
<div class="img-logo-empresa">
<img src="https://th.bing.com/th/id/R.5736d8250f0831a25b206dd0438b58da?rik=JMesAL9lF0w%2fWQ&riu=http%3a%2f%2fwww.vagasabertas.org%2fwp-content%2fuploads%2f2012%2f03%2flogoMartins.jpg&ehk=LPEw%2bWeioWddJzTIBixZZ4MFSIqhFoutOfAXqWy5zJY%3d&risl=&pid=ImgRaw&r=0" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://media.licdn.com/dms/image/v2/D4E03AQG53mrwCAPTtA/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1730829953918?e=1740614400&v=beta&t=VAnxmZoJTWiY6Gayqc_MXss_pE--QAOAqnEpDSY139U" alt="">
</div>
<div>
<p class="carrossel-nome">RICARDO</p><p class="sobrenome">LEPPER</p>
<p class="carrossel-cargo">Presidente na SoftExpert</p>
</div>
<a href="https://www.linkedin.com/in/ricardo-lepper/" 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>
Fundador e presidente da SoftExpert, especializada em soluções de transformação digital. Formado em Ciências da Computação pela UFSC, possui mais de 30 anos de experiência em TI, com atuação em projetos de excelência operacional e gestão para empresas de diversos setores.</p>
</div>
<div class="img-logo-empresa">
<img src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/c66eff19-37f5-4e35-afe3-3b79ff3a8798.png" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/d1fb3204-5430-41c8-826f-b91f0c8ce640.jpg" alt="">
</div>
<div>
<p class="carrossel-nome">ALEX</p><p class="sobrenome">ANDRADE</p>
<p class="carrossel-cargo">Químico e Diretor de produto - CPO</p>
</div>
<a href="https://www.linkedin.com/in/alexlims/" 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>
Químico e Diretor de Produto - CPO | Labsoft. Mais de 15 anos de experiência na gestão de processos e implantação de softwares LIMS em controles de qualidade em indústrias, laboratórios serviços e empresas de saneamento</p>
</div>
<div class="img-logo-empresa">
<img src="https://mylims.net/wp-content/uploads/2023/09/Design-sem-nome-40.png.webp" alt="">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div>
<div class="img">
<img src="https://multimedia.emkt.mail-softexpert.com/softexpert-B/photos/c3404f8c-74c8-4e13-838a-53144288b295.jpg" alt="">
</div>
<div>
<p class="carrossel-nome">GABRIELY</p><p class="sobrenome">BAIOCHI</p>
<p class="carrossel-cargo">Analista de processos e qualidade</p>
</div>
<a href="https://www.linkedin.com/in/gabriely-baiochi-252853195/" 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>
Graduada em Engenharia Civil, atua como auditora de processos, com mais de 4 anos de experiência no setor de sistemas de gestão integrado. Sua atuação inclui projetos de controle de documentos, elaboração de procedimentos, qualificação de fornecedores e auxílio em processos automatizados e melhoria contínua.</p>
</div>
<div class="img-logo-empresa">
<img src="https://media.licdn.com/dms/image/sync/v2/D4D27AQGmIYwgDPfB0A/articleshare-shrink_800/articleshare-shrink_800/0/1730981766204?e=2147483647&v=beta&t=C_2Ao6WMUMNvUa5vrK2cnkIm2chJ_Qiu9uUvzEtyxws" alt="">
</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>
