Glidejs Append content dynamic with Json

Nicolas Deyros — Thu, 27 Aug 2020 15:34:58 +0000

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();
  });
});

DEV Community: Nicolas Deyros

Glidejs Append content dynamic with Json

Back in the Future