I am making a Disney+ clone. In javascript code image sliding is not working. I have done my code in codesandbox.I tried to use carousel effect.But not working in my code.Images are showing,but sliding effect is not working.Please help me to solve this problem. code is given below:

const carousel = document.querySelector(".carousel");
let arrays = [];
let slideIndex = 0; //to track the current slide
const createSlide = () => {
  if (slideIndex >= movies.length) {
    slideIndex = 0;
  }

  //create DOM elements
  let slide = document.createElement("div");
  var imgElement = document.createElement("img");
  let content = document.createElement("div");
  let h1 = document.createElement("h1");
  let p = document.createElement("p");

  //Attaching all the elements
  imgElement.appendChild(document.createTextNode(movies[slideIndex].image));
  h1.appendChild(document.createTextNode(movies[slideIndex].name));
  p.appendChild(document.createTextNode(movies[slideIndex].des));
  content.appendChild(h1);
  slide.appendChild(content);
  content.appendChild(p);

  slide.appendChild(imgElement);
  carousel.appendChild(slide);

  //setting up images
  imgElement.src = movies[slideIndex].image;
  slideIndex++;

  //setting elements classname
  slide.className = "slider";
  content.className = "slide-content";
  h1.className = "movie-title";
  p.className = "movie-des";

  arrays.push(slide);

  if (arrays.length) {
    arrays[0].styles.marginleft = `calc(-${100 * (arrays.length - 2)}%- ${
      30 * (arrays.length - 2)
    }px)`;
  }
};

for (let i = 0; i < 3; i++) {
  createSlide();
}

setInterval(() => {
  createSlide();
}, 3000);`