Блог

На моей веб-странице есть галерея изображений, и при нажатии на эти изображения появляется модальное изображение, в котором есть карусель изображений (связанных с изображением, на которое был нажат).

Я использовал HTML, CSS, jQuery и Bootstrap 4. Поскольку в галерее есть несколько изображений, я добавляю данные в модальную / карусель динамически с помощью массивов jQuery. Я установил интервал данных изображений карусели равным 4000, он отлично работает при загрузке страницы в первый раз, т.Е.. первое изображение в карусели также скользит за 4 секунды, но когда я закрываю это модальное изображение и нажимаю на другое изображение в галерее, первое изображение в его модальной карусели скользит слишком быстро.

Я почему-то думаю, что происходит, например. в галерее есть 2 изображения: дерево и цветок. Когда я нажимаю на дерево, появляется модальное изображение, и первое изображение карусели T1 занимает 4 секунды, а второе изображение T2 занимает 2 секунды, и я закрываю модальное. Затем, когда я открываю модальное изображение цветка, первое изображение карусели F1 получает только 2 секунды (потому что T2 занял свои 2 секунды в предыдущей версии carousel). Я не уверен, имеет ли это смысл, или карусель всегда уничтожается, когда модал закрывается.

Что я могу сделать, чтобы исправить это?

РЕДАКТИРОВАТЬ Проблему можно увидеть по адресу: https://deepikauix.com/ak/portfolio.html Скольжение первого изображения довольно случайное, иногда для скольжения требуется время, иногда оно просто скользит очень быстро.

Я проверил код в указанном URL. Я думаю, вам следует удалить предыдущую карусель из DOM, как только пользователь нажмет на значок отмены.

Не могли бы вы проверить, внеся следующие изменения.

 $('#portfolioModal').on('hidden.bs.modal', () => {
    $('.carousel-inner').empty();
});