Показать сообщение отдельно
  #5 (permalink)  
Старый 22.01.2025, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

tp-20,
инфа для медитации ... проверяем наличие картинок, массив "живых" картинок, обёрнутых в div, грузим в нужный блок, запускаем инициализацию слайдера.
<!DOCTYPE html>

<html>
<head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <style type="text/css">
        </style>

        <script>
document.addEventListener( "DOMContentLoaded" , function() {
    "use strict"
let imgs = [
        'https://www.florissimo-shop.ru/upload/resize_cache/iblock/266/256_256_1/4100.jpeg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoTiQSapkMQDacdDcRC9L0OOzVYYT1HuyWTw&usqp=CAU',
        'https://ledforms.com/1906-medium_default_2x/10500120.jpg',
        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-KiKgpbTbFqKysnND1YAdMJ0qUSSa7bbUvA&usqp=CAU',
        'https://open3dmodel.com/wp-content/uploads/2020/03/Flowers-rose.jpg'
    ]

let divs = [];
imgs = imgs.map(src => {
    let img = new Image();
    img.src = src;
    return new Promise(resolve => {
        img.decode().then(() => {
        let div = document.createElement('div');
        div.append(img);
        divs.push(div);
        resolve()
        });
        img.error = resolve
    })
})

Promise.all(imgs).then(function() {
  document.querySelector('.slick-slider').prepend(...divs);
        //запускаем инициализацию слайдера
});
    });
        </script>
</head>

<body>
<div class="slick-slider"></div>

</body>
</html>

Последний раз редактировалось рони, 22.01.2025 в 17:05.
Ответить с цитированием