Проблемы с созданием карусели карточек и работой с переполнением CSS-пропа. ⇐ CSS

[Anonymous]

У меня есть карусель карточек.

Код: Выделить всё

.carousel {
display: flex;
overflow: visible;
position: relative;
justify-content: flex-start;
width: 100%;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.cards {
display: flex;
transition: transform 0.5s ease-in-out;
justify-content: space-between; /* Ensure cards are spaced */
width: 100%; /* Use full width for the cards */
}

.card {
flex: 0 0 30%; /* Ensure the cards have consistent size */
margin-right: 20px;
box-sizing: border-box;
overflow: hidden; /* Prevent overflow */
}

.card {
background: white;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin: 0;
flex: 0 0 100%;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s, box-shadow 0.3s;
text-decoration: none;
min-width: calc(100% / 5);
margin-right: 20px;
}

.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.card:active {
transform: scale(0.95);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card img {
width: 100%;
height: 80%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
object-fit: cover;
max-height: 400px;
}

.card .title {
font-size: 20px;
padding: 10px;
font-weight: 700;
color: #333;
text-align: center;
}

.card .subtitle {
font-size: 16px;
padding: 0 10px 10px;
text-align: center;
color: #666;
}

.carousel-controls {
position: absolute; /* Define os controles como posicionamento absoluto */
top: 50%; /* Centraliza verticalmente os controles */
transform: translateY(-50%); /* Ajusta para garantir que o centro esteja alinhado */
width: 100%; /* Define que os controles ocupam a largura total do carrossel */
display: flex;
justify-content: space-between; /* Espaça os botões para as extremidades */
}

.carousel-button {
background: #0077B6;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
transition: background 0.3s;
display: flex;
justify-content: center;
align-items: center;
position: absolute; /* Posiciona os botões dentro do contêiner relativo */
top: 50%; /* Centraliza verticalmente no contêiner */
transform: translateY(-50%); /* Ajusta para alinhar exatamente no centro */
}

#prev {
left: -20px; /* Ajuste à esquerda fora do carrossel */
}

#next {
right: -20px; /* Ajuste à direita fora do carrossel */
}

Код: Выделить всё

[url=de-cara-nova.html]
[img]./images/uiux.jpg[/img]
UI/UX. Ganhe uma cara nova!

Na O.F. Consulting, acreditamos que a experiência do usuário (UX) e o design da interface do usuário (UI) são essenciais para o sucesso de qualquer aplicação. Nossos especialistas em UI/UX desenvolvem soluções intuitivas e eficientes, sempre priorizando a usabilidade e a satisfação do cliente. A nossa abordagem começa com uma compreensão profunda das necessidades do usuário final, permitindo a criação de interfaces que sejam não apenas atraentes visualmente, mas que também facilitem a navegação e maximizem o engajamento.  Trabalhamos em estreita colaboração com nossos clientes para garantir que cada detalhe da interface reflita os valores da marca e proporcione uma experiência única e eficiente.

[/url]
[url=web-mobile.html]
[img]./images/webdesktop_wallpaper.png[/img]
Aplicativos Web e Mobile

Na era digital, a presença online é essencial para qualquer negócio. Nossa equipe de desenvolvimento de aplicativos web e móveis cria soluções robustas e personalizadas, que atendem às necessidades específicas de cada cliente. Seja um aplicativo responsivo ou uma solução móvel nativa, oferecemos uma experiência otimizada para qualquer plataforma. Utilizando as mais recentes tecnologias e metodologias ágeis, desenvolvemos desde aplicações simples até plataformas complexas, garantindo desempenho, segurança e escalabilidade. A O.F. Consulting está preparada para transformar suas ideias em soluções funcionais, entregando produtos que geram valor imediato ao negócio.

[/url]
[url=infra-cloud.html]
[img]./images/cloud-arch.png[/img]
Infraestrutura e Ambientes Cloud

A infraestrutura tecnológica e a migração para ambientes em nuvem são essenciais para a modernização e o crescimento escalável das empresas. Na O.F. Consulting, oferecemos uma abordagem estratégica para infraestrutura e cloud, garantindo alta disponibilidade, segurança e eficiência em ambientes flexíveis e escaláveis. Implementamos soluções que reduzem custos operacionais, aumentam a produtividade e asseguram o desempenho ideal dos sistemas. Nossos especialistas em cloud computing estão prontos para planejar, implementar e gerenciar ambientes em nuvem que permitem às empresas se adaptar rapidamente às mudanças do mercado e às demandas crescentes.

[/url]
[url=solucoes-arquitetura.html]
[img]./images/arch.png[/img]
Arquitetura de Soluções

Desenvolver uma solução eficaz requer uma arquitetura sólida. A O.F. Consulting se especializa em projetar e implementar arquiteturas de soluções que garantem flexibilidade, escalabilidade e segurança. Trabalhamos lado a lado com nossos clientes para entender seus desafios e identificar a melhor estrutura tecnológica para atender às suas necessidades. Nossos arquitetos de soluções utilizam padrões modernos de arquitetura, como microsserviços e arquitetura orientada a eventos, para criar sistemas robustos e fáceis de manter, alinhando as necessidades de curto prazo com a estratégia de longo prazo do cliente.

[/url]
[url=consultoria.html]
[img]./images/consulting_wallpaper.png[/img]
Consultoria para Impulsionar seu Negócio

Na O.F. Consulting, nossa missão é apoiar o crescimento de nossos clientes por meio de uma consultoria estratégica e focada em resultados. Oferecemos insights valiosos que ajudam empresas a superar desafios e aproveitar oportunidades em um mercado dinâmico. Com uma abordagem personalizada, trabalhamos de forma colaborativa para entender seus objetivos de negócios e recomendar soluções que aumentam a eficiência, reduzem custos e melhoram a competitividade. Seja no planejamento estratégico, na transformação digital ou na otimização de processos, nossa consultoria está preparada para impulsionar o seu negócio a novos patamares.

[/url]




arrow_back


arrow_forward

В карусели есть кнопки «Следующая» и «Предыдущая» для перехода между карточками. Переполнение карусели видно, потому что я хочу видеть несфокусированные карточки


Но когда переполнение установлено на видимое, кнопки «Далее» и «Предыдущее» перестают работать. В адаптивном режиме (мобильный) кнопки работали, поскольку переполнение становится скрытым.

Код: Выделить всё

@media (max-width: 768px) {
.carousel {
width: 100vw;
padding: 0;
overflow: hidden;
position: relative;
}

JS:

Код: Выделить всё

function updateCarousel(direction) {
const cardWidth = cardsContainer.children[0].offsetWidth; // Largura do card
const scrollMargin = parseInt(getComputedStyle(cardsContainer.children[0]).marginRight) || 0;
const scrollWidth = cardWidth + scrollMargin; // Largura total do card com margens

const scrollStep = direction === 'next' ? scrollWidth : -scrollWidth;

// Use scrollBy instead of manipulating scrollLeft directly to preserve overflow visible behavior
cardsContainer.scrollBy({
left: scrollStep,
behavior: 'smooth'
});
}

// Adiciona eventos aos botões de navegação
nextButton.addEventListener('click', () => {
console.log('nextClick');
updateCarousel('next');
});

prevButton.addEventListener('click', () => {
console.log('prevClick');
updateCarousel('prev');
});

// Intervalo automático para troca de cards
setInterval(() => {
if (currentIndex < totalCards - 1) {
currentIndex++;
} else {
currentIndex = 0; // Volta para o primeiro
}
updateCarousel();
}, 10000);

Как решить эту проблему?

Подробнее здесь: https://stackoverflow.com/questions/790 ... w-css-prop