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

[Anonymous]

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

my slider




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

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

.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
/* only first click above statement execute correctly and move card left
but also other click above statement execute but not as I expect
on second, third etc click above statement move card right direction instead of left direction
I got the correct logic for above statement to excecute correct way to move card in left direction
I modify the above statement from this  cards[currentCard].style.transform = `translateX(${-100}%)`;
to this cards[currentCard].style.transform = `translateX(${-100 * (currentCard + 1)}%)`;
but I want explanation why cards[currentCard].style.transform = `translateX(${-100}%)`; statement
move cards to right direction not for first click but second, third etc clicks.  */

// 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}%)`;
// cards[i].style.transform = `translateX(${-100 * (currentCard + 1) }%)`;
cards[i].style.transform = `translateX(calc(${-100 * (currentCard + 1)}% + ${(currentCard + 1) * -20}px ))`;
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