loading...
Cover image for Glidejs Append content dynamic with Json

Glidejs Append content dynamic with Json

saoghoul profile image Nicolas Deyros Updated on ・2 min read

Hi,

I'm trying to append content dynamically from a Json file but I cannot find a work around to make it work.

import Glide from '@glidejs/glide';

function slider() {
  let ul = document.querySelector('.glide__slides');
  let card = '';
  var glide = new Glide('.glide').destroy();

  const photo = import('../metadata/photos.json').then((module) => {
    const data = module.default;
    data.forEach((photo) => {
      console.log(photo);
      card += `<li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>`;
    });
    ul.innerHTML = card;
  });

  glide.mount();
}

slider();

Thanks in advance for your time.


Back in the Future

I could solve it with the following code:

import Glide from '@glidejs/glide';

let ul = document.querySelector('.glide_mobile_slides');
let desktopCarrousel = document.querySelector('.glide_desktop_carrousel');
let msg = document.querySelector('#msgDefault');
let arrows = document.querySelector('.glide__arrows');

let card = '';

var init = {
  method: 'GET',
  headers: { 'Content-Type': 'application/json' },
  mode: 'cors',
  cache: 'default',
};
const url = new Request('../metadata/@YOUR-FILE@.json', init);

const fetchData = fetch(url).then((data) => {
  return data.json();
});

statesSelect.addEventListener('change', (e) => {
  statesSelectValue = e.target.value;
  card = '';

  fetchData.then((datas) => {
    datas[statesSelectValue].forEach((data) => {
        card += `
          <li class="glide__slide">
            <div class="max-w-xs rounded overflow-hidden">
              <div class="p-2 mb-1 text-center bg-blue-700 font-bold text-white">
                ${data.title}
              </div>
              <div>
          </li>
    `;
      }
    });
    if (card != '') {
      ul.innerHTML = card;
      desktopCarrousel.innerHTML = card;
      arrows.classList.add('block'), arrows.classList.remove('hidden');
      msg.innerHTML = '';
    } else {
      ul.innerHTML = '';
      desktopCarrousel.innerHTML = '';
      msg.innerHTML = `
      <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 text-center" role="alert">
        <p class="font-bold">Error msg</p>
      </div>
      `;
    }
    new Glide('.glide_mobile', {
      type: 'slider',
      startAt: 0,
      focusAt: 'center',
      perView: 2,
      hoverpause: true,
      keyboard: true,
      bound: true,
      gap: 10,
    }).mount();
    new Glide('.glide_desktop', {
      type: 'carrousel',
      perView: 4,
      startAt: 0,
      hoverpause: true,
      keyboard: true,
      autoplay: 4000,
      breakpoints: {
        1024: {
          perView: 3,
        },
        800: {
          perView: 2,
        },
      },
    }).mount();
  });
});

Posted on by:

Discussion

pic
Editor guide