` .... src="$img1$" .... `
Конечно, названия переменных странные для JS. Если хотите подставлять переменные в строку, образованной тильдами, то нужно использовать синтаксис ${ переменная или вычисляемое выражение }, тогда подстановка будет работать так:
` .... src="${ $img1$ }" .... `
1. Нужно убедиться, что вы корректно генерируете HTML.
2. Если вы не правили demo.js, то знайте, как он подхватывает элементы:
// Get all images and texts, get the `canvas` element, and save slider length
var sliderCanvas = document.querySelector('.pieces-slider__canvas');
var imagesEl = [].slice.call(document.querySelectorAll('.pieces-slider__image'));
var textEl = [].slice.call(document.querySelectorAll('.pieces-slider__text'));
var slidesLength = imagesEl.length;
То есть, он подхватывает элементы по селекторам классов.
Если вы инициализируете слайдер с помощью demo.js, то переименование контейнеров приведет к потере инициализирующихся элементов.
В общем, либо модифицируйте demo, либо на его основе пишите свой инициализатор слайдера.
3. HTML вы должны подготовить до создания объекта слайдера (до вызова new Pieces({ .... }) ). Либо это делать исключительно через JS. Здесь в примере как раз приведен фрагмент подготовки массива для объекта Pieces:
// Build the array of items to draw using Pieces
var items = [];
var imagesReady = 0;
for (var i = 0; i < slidesLength; i++) {
// Wait for all images to load before initializing the slider and event listeners
var slideImage = new Image();
slideImage.onload = function() {
if (++imagesReady == slidesLength) {
initSlider();
initEvents();
}
};
// Push all elements for each slide with the corresponding options
items.push({type: 'image', value: imagesEl[i], options: imageOptions});
items.push({type: 'text', value: textEl[i].innerText, options: textOptions});
items.push({type: 'text', value: i + 1, options: numberOptions});
// Save indexes
textIndexes.push(i * 3 + 1);
numberIndexes.push(i * 3 + 2);
// Set image src
slideImage.src = imagesEl[i].src;
}
После инициализации объекта-слайдера, изменять состав слайдов можно только методами этого объекта, если они прописаны в библиотеке (как вы будете изучать минимизированный файл библиотеки, без документации - я хз).
