简单旋转木马滑块从第二张幻灯片开始(javascript)

Question

我编写了一个简单的旋转木马滑块。但我需要一些帮助。如果我从第一张幻灯片开始，我的旋转木马滑块工作得很好。但我想从第二张幻灯片开始，我也可以在init函数中使用goToSlide(1(来完成，但我不想看到我的第一张幻灯片向左滑动。这是一个简单的代码笔链接(https://codepen.io/ruslancik/pen/QWNKowx?editors=0010)。有人能帮帮我吗？

const slideImage = document.querySelectorAll(".slide-image");
const slidesContainer = document.querySelector(".slides-container");
let slideWidth = slideImage[0].clientWidth;
let currentSlide = 0;
function init() {
slideImage.forEach((img, i) => {
img.style.left = i * 100 + "%";
});
slideImage[0].classList.add("active");

//want to start from second slide
goToSlide(1);
}
init()


function goToSlide(slideNumber) {
slidesContainer.style.transform =
"translateX(-" + slideWidth * slideNumber + "px)";
currentSlide = slideNumber;
}

Answer 1

const slidesContainer = document.querySelector(".slides-container");
const originalSlideImage = document.querySelectorAll(".slide-image");
let isRestored = false;
let isInitialSlideButtonClick = true;
function init() {
const slideImage = originalSlideImage;
let slideWidth = slideImage[0].clientWidth;
let currentSlide = 0;
slideImage.forEach((img, i) => {
img.style.left = i * 100 + "%";
});
let newSlideImage = [...slideImage];
swap(newSlideImage);

newSlideImage.forEach(img => {
slidesContainer.appendChild(img)
});
}

init();
function restoreOriginalSlides() {
if (!isRestored) {
slidesContainer.innerHTML = "";
originalSlideImage.forEach((img, i) => {
img.classList.remove('active')
img.style.left = i * 100 + "%";
slidesContainer.appendChild(img)
});
isRestored = true;
}
}

function swap(slideImageArray) {
let firstSlide = slideImageArray[0];
let desiredFirstSlideIndex = 1;
let desiredFirstSlide = slideImageArray[desiredFirstSlideIndex];
slidesContainer.innerHTML = ""
let tempSlide = firstSlide;
let firstLeftStyle = firstSlide.style.left
let desiredLeftStyle = desiredFirstSlide.style.left
firstSlide = desiredFirstSlide;
firstSlide.style.left = firstLeftStyle;
desiredFirstSlide = tempSlide;
desiredFirstSlide.style.left = desiredLeftStyle;
slideImageArray[0] = firstSlide;
slideImageArray[desiredFirstSlideIndex] = desiredFirstSlide;
}
function goToSlide(slideNumber) {
if (isInitialSlideButtonClick) {
restoreOriginalSlides();
isInitialSlideButtonClick = false;
}
const slideImage = document.querySelectorAll(".slide-image");
let slideWidth = slideImage[0].clientWidth;
let currentSlide = slideNumber;
slideImage.forEach((img, index) => {
index != currentSlide ? img.classList.remove('active') : img.classList.add('active');
})
slidesContainer.style.transform =
"translateX(-" + slideWidth * slideNumber + "px)";
}

body {
margin: 0;
box-sizing: border-box;
background: #222;
}
h1 {
text-align: center;
color: #eee;
font-family: "Roboto Thin", sans-serif;
text-transform: uppercase;
letter-spacing: 8px;
}
.wrapper {
width: 100%;
overflow: hidden;
}
.slides-container {
height: 500px;
transition: 900ms cubic-bezier(0.48, 0.15, 0.18, 1);
position: relative;
}
.slide-image {
height: 100%;
width: 100%;
position: absolute;
}

<div class="wrapper">
<div class="slides-container">
<div class="slide-image">
<h1>1</h1>
</div>
<div class="slide-image active">
<h1>2</h1>
</div>
<div class="slide-image">
<h1>3</h1>
</div>
<div class="slide-image">
<h1>4</h1>
</div>
<div class="slide-image">
<h1>5</h1>
</div>
</div>
</div>
<button onclick='goToSlide(0)'>slide 1</button>
<button onclick='goToSlide(1)'>slide 2</button>
<button onclick='goToSlide(2)'>slide 3</button>
<button onclick='goToSlide(3)'>slide 4</button>
<button onclick='goToSlide(4)'>slide 5</button>
</div>
<div class="navigation-dots"></div>