Simple Carousel Slider start from second slide (javascript)

Question

I code a simple carousel slider. But I need some help. My carousel slider works well if I am start from first slide. But I want to start from second slide I also can do this with goToSlide(1) inside init function but I do not want to see my first slide sliding left. Here is the simple codepen link (https://codepen.io/ruslancik/pen/QWNKowx?editors=0010). Can someone please help me ?

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;
}

score 2 · Accepted Answer · answered Aug 20 '20 at 13:42

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>

OMG ! What are you doing man ? So much effort. You wrote the whole code from zero. Thank you so much. — Ruslan Bairamovi, Aug 20 '20 at 18:11
You're most welcome. Given much time, I'm sure there is a smarter way of handling this, however I used the following logic: => swap the 1st slide position with the target one, including the "left" styles => clear the slide container => render the slides with the new slide setup . When the user clicks the navigation buttons for the first time, restore the original setup,once again taking note of the "left" style => navigate to the intended slide position. — Tafadzwa Chimberengwa, Aug 20 '20 at 18:46

Simple Carousel Slider start from second slide (javascript)

1 Answers1