Hi newbi trying to dynamically generate slides and captions from json file for slick carousel. This is what I have so far - with help from chatgpt - but it’s not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moshe Avni - Creation of the World</title>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-color: #E6E6FA;">
<h2 style="color: green; margin-left: 40vw; ">Oil on Canvas - שמן על בד</h2>
<main id="row">
<div class="nav-col" style="float: left">
<nav id="navMenu" style="float: left; margin-top: 10vh">
</nav>
</div>
<div class="carousel-container">
<div class="slick-carousel">
</div>
<div id="captions" class="caption-container">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script> var medium = 'oilOnCanvas';</script>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>var medium = 'oilOnCanvas';</script>
<script>
$(document).ready(function () {
mediumJson = 'json/' + medium + '.json';
fetch(mediumJson)
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
alert('error: ' + err);
console.log('error: ' + err);
});
function appendData(data) {
mediumLen = data[medium].length;
var displayArray = "";
var captionArray = "";
for (var i = 0; i < mediumLen; i++) {
var mediumImg = data[medium][i].imgMain;
var titHeb = data[medium][i].titleHeb;
var titEng = data[medium][i].titleEng;
var yr = data[medium][i].year;
var w = data[medium][i].width;
var h = data[medium][i].height;
var altTxt = data[medium][i].alt;
displayArray += '<div><img src="imgs/' + medium + '/' + mediumImg + '" style="width:55%"> </div>\r\n';
captionArray += '<div class="caption flex-container" data-index="' + i + '">' +
'<div class="flex-items">' + titHeb + ' <br/> <br/>' + titEng + '<hr></div>' +
'<div class="flex-items">' + w + ' x ' + h + ' cm.<hr></div>' +
'<div class="flex-items">' + yr + '</div> </div>\r\n';
}
document.querySelector(".slick-carousel").innerHTML = displayArray;
document.getElementById("captions").innerHTML = captionArray;
$('.slick-carousel').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
adaptiveHeight: true
});
// Update caption on slide change
$('.slick-carousel').on('afterChange', function(event, slick, currentSlide){
var caption = document.querySelectorAll('.caption')[currentSlide];
var captionsContainer = document.getElementById("captions");
// NOTE: following line throws error:
// TypeError: Cannot read properties of undefined (reading 'innerHTML')
captionsContainer.innerHTML = caption.innerHTML;
});
// Set initial caption
var initialCaption = document.querySelectorAll('.caption')[0];
document.getElementById("captions").innerHTML = initialCaption.innerHTML;
}
});
</script>
<script>
$(function(){
$("#navMenu").load("nav-list.html");
});
</script>
</body>
</html>
Yes, sorry for being vague. When the slick carousel loads initially no slides appear just the arrows and dots, when I click on an arrow or dot the carousel slides appear and operate as expected.
The captions (id=“captions”) appear as a static pile one on top of the other and don’t change with the slides. This is the css for the captions:
Well for starters, your CSS file is 404’ing.
Then your nav-list.html is,
then the references to jquery-3.6.0.min.js and jquery-migrate-1.2.1.min.js are timing out.
Why are we loading jquery 3.6, then jquery 1.11, and then migrate 1.2 (which is to patch 1.11 for things removed in 1.9… but jquery’s on version 3.7.1 now.
Load one version of jquery; the latest. Slick slider hasn’t been properly released since 2017, so i dont know that i’d trust it (especially since all of the sliders on it’s own demo page… don’t work…)