Simple Code

# Dynamic data

To use Simple Slider with dynamic data, you need to initiate the package after you get the data. For example in plain javascript you need to do this:

  1. Select the container
  2. Fetch the data
  3. After you get the data, you can map over it and create the slides
  4. Initiate the package

# Code

const sliderContainer = document.querySelector('.sliderContainer'); // Select the container
const fetchProjects = async () => {
  // your function
  try {
    const resp = await fetch(
      // Fetch the data
      'https://my-portfolio-blog-website.netlify.app/api/myProjects'
    );
    const data = await resp.json();
    const projectImg = data // Map over it and create the slides
      .map((project) => {
        return `
      <a class="slide" href="${project.pageUrl}" target="_blank"
        >visit
        <img src="${project.url}" alt="cateria" />
      </a>
        `;
      })
      .join('');
    sliderContainer.innerHTML = projectImg;
    simpleslider(); // Initiate the package
  } catch (error) {
    console.log(error);
  }
};

fetchProjects(); // Run your function

# Example

Try it out

Play around with code on codepen (opens new window)

←