※Please check using Developer tools
.swiper-container {
opacity: 0;
}
.swiper-container.show {
opacity: 1;
}
$(function(){
let jsonList = function(json, target) {
for(let i=0; i < 1; i++){
let code = ('<a href="' + json[i].link + '"><div"><img src="' + json[i].img + '"></div><p>' + json[i].text + '</p></a>');
let element = document.getElementById(target);
element.insertAdjacentHTML("beforeend", code);
}
};
$.ajax({
url: '1.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list01');
}
);
$.ajax({
url: '2.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list02');
}
);
$.ajax({
url: '3.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list03');
}
);
$.ajax({
url: '4.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list04');
}
);
$.ajax({
url: '5.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list05');
}
);
$.ajax({
url: '6.json',
type: 'GET',
dataType: 'json',
})
.then(
function (json) {
jsonList(json, 'list06');
}
);
});
$(window).on('load', function(){
setTimeout(function(){
$(".swiper-container").addClass("show");
var mySwiper1 = new Swiper('.swiper1', {
paginationClickable: true,
slidesPerView: 3,
loop: true,
speed: 1000,
spaceBetween: 20
})
},100);
});