Ich habe ein Problem mit dem Pfeil in meinem Code. Es funktioniert nicht richtig ⇐ HTML

[Anonymous]

Ich entwickle ein Karussell für meine Website, in dem Benutzer mit Pfeilen zwischen den Karten nach vorne und rückwärts navigieren können, und die Karten sollten unendlich schleifen. Wenn Sie jedoch auf die Pfeile klicken, haben Sie jedoch keinen Einfluss. Karte im Karussell. Darüber hinaus sollte das Karussell eine "unendliche" Schleifenfunktion haben, was bedeutet, dass das Erreichen der letzten Karte automatisch zur ersten Karte zurückkehren sollte. Im Moment funktionieren der Pfeil-Klickereignisse nicht wie erwartet. >
class Carousel {
constructor() {
// Elementos do DOM
this.container = document.querySelector('.carousel-wrapper');
this.track = document.querySelector('.carousel-track');
this.prevButton = document.querySelector('.carousel-button.prev');
this.nextButton = document.querySelector('.carousel-button.next');

// Estado do carrossel
this.isDragging = false;
this.startX = 0;
this.scrollLeft = 0;

// Dados dos produtos
this.products = [{
id: 1,
title: 'Linha Escritório',
category: 'Escritório',
description: 'Móveis ergonômicos para seu ambiente de trabalho',
image: 'https://images.unsplash.com/photo-15247 ... w=800&q=80'
},
{
id: 2,
title: 'Linha Sala',
category: 'Sala',
description: 'Conforto e elegância para suas reuniões',
image: 'https://images.unsplash.com/photo-15550 ... w=800&q=80'
},
{
id: 3,
title: 'Linha Armários',
category: 'Armários',
description: 'Organização e praticidade para seu espaço',
image: 'https://images.unsplash.com/photo-15954 ... w=800&q=80'
},
{
id: 4,
title: 'Linha Executiva',
category: 'Executivo',
description: 'Sofisticação para ambientes corporativos',
image: 'https://images.unsplash.com/photo-14973 ... w=800&q=80'
}
];

this.initialize();
}

initialize() {
this.renderCards();
this.addEventListeners();
}

renderCards() {
// Duplica os produtos para criar o efeito infinito
const items = [...this.products, ...this.products, ...this.products];

this.track.innerHTML = items.map(product => `




${product.category}
${product.title}
${product.description}
Explorar


`).join('');
}

addEventListeners() {
// Navegação por botões
this.prevButton.addEventListener('click', () => this.scroll('left'));
this.nextButton.addEventListener('click', () => this.scroll('right'));

// Eventos de mouse para drag
this.track.addEventListener('mousedown', this.startDragging.bind(this));
this.track.addEventListener('mousemove', this.drag.bind(this));
this.track.addEventListener('mouseup', this.stopDragging.bind(this));
this.track.addEventListener('mouseleave', this.stopDragging.bind(this));

// Previne o menu de contexto ao arrastar
this.track.addEventListener('contextmenu', e => e.preventDefault());
}

startDragging(e) {
if (e.button !== 0) return; // Apenas botão esquerdo do mouse

this.isDragging = true;
this.track.classList.add('dragging');
this.startX = e.pageX - this.track.offsetLeft;
this.scrollLeft = this.track.scrollLeft;
}

drag(e) {
if (!this.isDragging) return;

e.preventDefault();
const x = e.pageX - this.track.offsetLeft;
const walk = (x - this.startX) * 2;
this.track.scrollLeft = this.scrollLeft - walk;
}

stopDragging() {
this.isDragging = false;
this.track.classList.remove('dragging');
}

scroll(direction) {
const cardWidth = this.track.querySelector('.carousel-card').offsetWidth + parseInt(window.getComputedStyle(this.track).gap); // Corrigido para garantir que o valor seja numérico
const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;

this.track.scrollBy({
left: scrollAmount,
behavior: 'smooth'
});
}
}

// Inicializa o carrossel quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', () => {
new Carousel();
});< /code>
.carousel-section {
background-color: #f8f9fa;
padding: 4rem 0;
}

.carousel-container {
position: relative;
padding: 0 60px;
/* Espaço para os botões */
}

.carousel-wrapper {
overflow: hidden;
position: relative;
}

.carousel-track {
display: flex;
gap: 2rem;
transition: transform 0.5s ease-in-out;
cursor: grab;
}

.carousel-track.dragging {
cursor: grabbing;
transition: none;
}

/* Cards */
.carousel-card {
flex: 0 0 300px;
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.carousel-card:hover {
transform: translateY(-10px);
}

.card-image {
height: 200px;
overflow: hidden;
}

.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.card-content {
padding: 1.5rem;
}

.card-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
}

.card-category {
display: inline-block;
padding: 0.25rem 0.75rem;
background-color: #e9ecef;
color: #666;
border-radius: 1rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}

.card-button {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: #0d6efd;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.3s;
text-decoration: none;
width: 100%;
text-align: center;
}

.card-button:hover {
background-color: #0b5ed7;
}

/* Botões de navegação */
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}

.carousel-button:hover {
background: #f8f9fa;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-button.prev {
left: 0;
}

.carousel-button.next {
right: 0;
}

/* Responsividade */
@media (max-width: 768px) {
.carousel-card {
flex: 0 0 calc(100% - 2rem);
}

.carousel-container {
padding: 0 40px;
}
}< /code>



Explore Nossas Linhas de Produtos

Descubra nossa coleção completa de móveis profissionais, projetados para
transformar seu ambiente de trabalho com estilo e funcionalidade.




















< /code>
< /div>
< /div>
< /p>
Ich hoffe, Sie alle können mir dabei helfen, die Pfeile richtig zu funktionieren.