Как объединить несколько изображений в галерею?

Question

[De-12]

Привет, есть ли такая возможность, чтобы был скрипт, который если идет несколько тегов img подряд, он им добавлял контейнер и объединял в галерею? Т.е. если в статье несколько таких блоков, то каждый - это отдельная галлерея. Куда копать?

Например:

Привет это первый абзац
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
Это второй абзац
<img src="img1.jpg">
<img src="img2.jpg">

И нужно чтобы из этого получилось 2 галереи со слайдером.

Comments

[Aetae]

Возможность такая есть, но это надо делать руками. Для начала определитесь какой именно слайдер вы хотите, потом попытайтесь сделать сами и только если не получится - обращайтесь снова сюда.

Вот так можно получить масиив с группированными img идущими по порядку:

const imgs = Array.prototype.reduce.call(
  document.querySelectorAll('img'),
  (acc, img, i, arr) => {
    if(img.previousElementSibling !== arr[i - 1])
      acc.push([img]);
    else
      acc[acc.length - 1].push(img);
    return acc;
  }, 
  []
);

Что уж дальше с этим делать - решать только вам.

[Rerurk]

css overflow hidden. И меняете позиции top || left|| right

[De-12]

Aetae, может быть вы сможете сделать за $$?

[Aetae]

De-12, эт сюда: https://freelance.habr.com/tasks
Лично мне - лень.)