Пишем генератор галереи изображений со встроенным слайдером

[TicSo]

Поясните, пожалуйста, вот по вашим условиям и реализации:

Изображение, по которому кликнули — первый слайд.

а какие варианты ещё возможны, кроме как логичного, — получаю то, на что кликаю,

Возможность получить готовый код.

какая в нём потребность, — просто не сталкивался или не уловил, под что заготовка?

Любые предложения по улучшению и конструктивная критика приветствуются.

Спасибо за

радикальное

решение. Улучшать…, например, более рационально использовать видимую область экрана, чтобы слайд был максимально большим, а стрелки управления 'всплывали' на нём. При повторном нажатии на кнопку GET CODE у меня (этот код) не пропадает…

[aio350]

по порядку:
изображение, по которому кликнули — первый слайд — логично, но пришлось повозиться. Посмотрите на решение, оно далеко не очевидное. Если память мне не изменяет, я получил его методом перебора;
возможность получить готовый код — готовый код можно использовать для готовой галереи и слайдера. Помещаете готовый код в body, добавляете стили, отредактированный скрипт и пользуетесь (что-то типа результата сборки);
попробуйте более рационально использовать видимую область экрана при условии, что, во-первых, мы не знаем размеров и ориентации загружаемых изображений, во-вторых, галерея и слайдер должны одинаково хорошо смотреться на экранах с разным разрешением. Если получится, поделитесь кодом;
что касается исчезновения кода при повторном нажатии getCodeButton, я этого не планировал, но можно переписать эту часть (после else, вместо return):

getCodeButton.addEventListener('click', () => {
    if (document.querySelector('p') == null) {
      // ...
    } else {
      let p = document.querySelector('p')
      document.body.removeChild(p)
    }
})

… и код будет исчезать.
Спасибо за комментарий.

[TicSo]

понятно,

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

думал, если ваш код html будет исходно помещён в body, то по клику там же и получу 'результат сборки'… вы его выводите на обозрение пользователю для дальнейших действий.

[aio350]

у меня не было цели написать полноценный сборщик. В полноценном сборщике, кроме возможности скачать архив с кодом, должна быть вариативность кнопок, эффекта переключения, количества одновременно показываемых слайдов и т.д. Одним из лучших подобных инструментов является Image Slider Maker. Вы посмотрите, сколько там кода, но даже его нужно править, чтобы слайдер на странице работал как надо.

[deamondz]

Сегодня день лучших уроков по вебу?
habr.com/ru/post/486624