Создание слайдера карты, перемещающего отдельную карту, нажав определенную кнопку «Предыдущая» или «Далее», используя Ja ⇐ CSS

[Anonymous]

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

my slider




body {
margin: 0px;
padding: 0px;
}
.card-container {
width: 100%;
overflow: auto;
border: 2.5px solid #000000;
margin: 20px auto;
}

.card-slider {
display: flex;
border: 1.5px solid #ff0000;
width: 100%;
}

.card {
flex: 0 0 auto;
width: 100%;
max-width: 300px;
height: 200px;
margin-right: 20px;
transition: transform 0.5s ease;
text-align: center;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -285px;
}

.next {
right: 0px;
}







Card One
Card Two
Card Three
Card Four
Card Five
Card Six


❮
❯


let currentCard = 0;
let cards = document.querySelectorAll(".card");
let totalCards = cards.length;

function showCard() {
cards[currentCard].style.transform = `translateX(${-100}%)`; // trying to move this card left
// after moving above card space created between currentCard and currentCard +1

// this for loop for  remove space between the cards
for ( let i = currentCard +1; i < totalCards; i++ ) {
cards[i].style.transform = `translateX(${-100}%)`;
console.log("Value of i: ",i, " currentCard: ",currentCard);
}
// after come out from for loop slide currentCard end of the all other cards
cards[currentCard].style.transform = `translateX(${100 * totalCards }%)`;

// increment currentCard
currentCard++;
}

function nextSlide () {
showCard();
}

Я пытаюсь создать слайдер для перемещения отдельных карточек.
Моя логика:
function show card() {.. .Первый оператор этой функции — сдвинуть текущую карту влево на -100%
после перемещения текущего пространства карты, созданного между currentCard и currentCard +1
чтобы удалить пространство, создав цикл for для перемещения карточек left -100% по одному
после выхода из цикла for переместить текущую карту в конец последней карты
увеличить currentCard;
function nextSlide() {...}
показать текущую карточку
но первый оператор функции showCard(){...} и цикл for выполняются только один раз.
почему?? что не так в моем коде, пожалуйста, ответьте на мой вопрос или помогите мне предложить лучшее решение или объясните мой код шаг за шагом, пожалуйста...

Подробнее здесь: https://stackoverflow.com/questions/783 ... on-previou