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

如何解决简单的旋转木马滑块从第二张幻灯片开始javascript

我编写了一个简单的轮播滑块。但是我需要一些帮助。如果从第一张幻灯片开始，轮播滑块会很好用。但是我想从第二张幻灯片开始，我也可以使用 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;
}

解决方法

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>