Tiny Slider JS doesn't work when using Array of Objects

Question

My current problem in this question was solved, to iterate the data dynamically using Array of Objects.

Now the problem here is the rendering of data using Tiny Slider JS. I rendered it in the HTML code but unfortunately, it doesn't follow the slider UI.

The actual result:

app.js

const project = [
  {
    image: "src/images/img-1.jpg",
    name: "Project 1",
    description: "Project Description here.",
  },
  {
    image: "src/images/img-2.jpg",
    name: "Project 2",
    description: "Project Description here. 2",
  },
  {
    image: "src/images/img-3.jpg",
    name: "Project 3",
    description: "Project Description here. 3",
  },
  {
    image: "src/images/img-4.jpg",
    name: "Project 4",
    description: "Project Description here. 4",
  },
];

const slide = document.querySelector(".slide");
project.forEach((proj) => {
  const newSlide = slide.cloneNode(true);

  newSlide.querySelector(
    ".slide-img"
  ).style.backgroundImage = `url(${proj.image})`;

  newSlide.querySelector(".project-name").innerHTML = proj.name;
  newSlide.querySelector(".project-description").innerHTML = proj.description;

  slide.parentNode.appendChild(newSlide);
});

slide.parentNode.removeChild(slide);

index.html

                    <div class="my-slider">
                        <div>
                            <div class="slide">
                                <div class="slide-img" style="background-image: url('src/images/img-1.jpg')">
                                    <a href="http://">View More</a>
                                </div>
                                <br>
                                <div class="slide-info">
                                    <h3 class="project-name"></h3>
                                    <p class="project-description subtext"></p>
                                </div>
                            </div>
                        </div>
                    </div>

Tiny Slider Config

let slider = tns({
  container: ".my-slider"
  //...options here
});

score 1 · Answer 1 · answered Jun 20 '22 at 13:09

The rendering in Tiny Slider.js does not work because of excess div tags outside the slide class.

Final structure of index.html:

                       <div class="slide">
                            <div class="slide-img">
                                <a href="http://">View More</a>
                            </div>
                            <br>
                            <div class="slide-info">
                                <h3 class="project-name"></h3>
                                <p class="project-description subtext"></p>
                            </div>
                        </div>

Tiny Slider JS doesn't work when using Array of Objects

1 Answers1