js

const navSlide = ()=> {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-items');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
    });
}

window.onload = () => {

  var slide = document.getElementById('event-slide');
//   fetch('http://localhost:8000/users')
//   .then((response) => {
//     return response.json();
//   })
//   .then((json) => {
//   for(i = 0; i < json.length; i++) {
//     let user = document.createElement('div');
//     user.setAttribute('class', 'swiper-slide');
//     user.setAttribute('id', i);
//     user.innerHTML = JSON.stringify(json[i]);
//     slide.appendChild(user);
//     console.log('dentro do loop');
//   }
//   console.log("vai chamar o swiper");
// })

let imgURL = ""

  for (i=0; i<=4; i++) {
    if (i==0) imgURL = 'https://123-teste-vamo-carai.s3.amazonaws.com/teste/criptografia.jpg';
    else if (i==1) imgURL = 'https://123-teste-vamo-carai.s3.amazonaws.com/teste/gelado.jpg';
    else if (i==2) imgURL = 'https://123-teste-vamo-carai.s3.amazonaws.com/teste/hack.jpg';
    else if (i==3) imgURL = 'https://123-teste-vamo-carai.s3.amazonaws.com/teste/mrpotato.jpg';
    else if (i==4) imgURL = 'https://123-teste-vamo-carai.s3.amazonaws.com/teste/spoofing.jpg';
    let outerDiv = document.createElement('div');
    let innerDiv = document.createElement('div');
    outerDiv.classList.add('swiper-slide', 'swiper-lazy');
    outerDiv.setAttribute('data-background', imgURL);
    outerDiv.style.backgroundImage = '-moz-linear-gradient(white, black)';
    innerDiv.classList.add('swiper-lazy-preloader', 'swiper-lazy-preloader-black');

    outerDiv.appendChild(innerDiv);
    slide.appendChild(outerDiv);
  }

  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    lazy: {
      loadPrevNext: true,
      loadPrevNextAmount: 2,
      preloadImages: false
    },

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })

}






navSlide();