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)