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