Форум

tp-20 · #1 (**permalink**) 19.01.2025, 22:12

Доброго дня всем.

Есть вертикальный слайдер slick. Он крутит несколько картинок, которые образуют одну большую картинку (рич для товаров, как на вб). В каждом товаре разное кол-во картинок. Из-за этого возникает небольшая проблема - слайдер скроллит несуществующие картинки, хотя я их скриптом убрал.

$(function(){    
    $('.slick-slide img').on("error", function(){
        $(this).hide().closest('.slick-slide').remove();
    }); // если фото не существует, убираем целиком контейнер с ним
});

Для каждого товара создаётся своя папка, где может быть от 3 до 8 фото.
Сейчас я в скрипте указал максимальное кол-во фото - 8.

Дальше в диве циклом выводятся эти фото:

for(var i = 1; i < 8; i++){
        document.write('<div><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
    }

Как можно заменить цифру в счётчике i < 8 на что-то универсальное, типа i < n, и чтобы скрипт самостоятельно определял, сколько в папке фото?

Скриншот для понимания: красным выделил существующие фото, они подгрузились, всё ок.
жёлтым выделил блок с несуществующими фото, которые слайдер slick сам резервирует под них место, т.к. по счётчику i < 8 он и должен их выводить. Т.е. сами фото он не выводит, т.к их просто нет, но пустое пространство для них выделяет.

рони · #2 (**permalink**) 19.01.2025, 22:46

tp-20,
что мешает запустить инициализацию слайдера после строки 4?

tp-20 · #3 (**permalink**) 19.01.2025, 22:54

рони, спасибо, идеально)) просто переставить скрипты местами)

tp-20 · #4 (**permalink**) Вчера, 14:24

В продолжение темы..

В чём может быть причина?
Не срабатывает код on error. Вернее работает как-то через раз, но чаще не работает. На телефоне работает только один раз - после чистки кэша. Со второй перезагрузки страницы опять не работает.

По логике должно работать так: если картинка не подгрузилась (неверный путь или нет картинки на сервере), то нужно спрятать родителя - контейнер с отсутствующей картинкой.

Скрипт:

$(document).ready(function() {    
    $(function(){    
        $('.slick-slide img').on("error", function(){    // картинка не подгрузилась
            $(this).closest('.slick-slide').remove();    // значит полностью удаляем родителя
        });
    });
});

И блок с картинками тоже в скрипте, т.к. там счётчик

for(var i = 1; i < 7; i++){
        document.write('<div class="slick-slide"><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
    }

В итоге выглядит это так: (скриншот)

рони · #5 (**permalink**) Вчера, 16:37

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>

Форум

Справочник

Discord чат

Курсы javascript