Подскажите плагин для галереи?

Вот два пакета. Может быть подойдут. Но мне кажется проще своё написать.

Галерея №1

Галерея №2

Пример с CodePen [Спасибо @MaximLensky за предоставленную ссылку]

Не рекомендуется использование jquery.

Возможны проблемы при использовании web components.

Используемые библиотеки

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js

js код:

    $(document).ready(function(){
  $('.js-gallery').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: '<span class="gallery-arrow mod-prev">Prev</span>',
    nextArrow: '<span class="gallery-arrow mod-next">Next</span>'
  });
  $('.js-gallery').slickLightbox({
    src: 'src',
    itemSelector: '.js-gallery-popup img',
    background: 'rgba(0, 0, 0, .7)'
  });
});

html:

<div class="content">
  <h1 class="content-title">Gallery</h1>
  <div class="gallery js-gallery">
    <div class="gallery-item">
      <div class="gallery-img-holder js-gallery-popup">
        <img src="https://picsum.photos/600/500" alt="" class="gallery-img">
      </div>
    </div>
    <div class="gallery-item">
      <div class="gallery-img-holder js-gallery-popup">
        <img src="https://picsum.photos/700/500" alt="" class="gallery-img">
      </div>
    </div>
    <div class="gallery-item">
      <div class="gallery-img-holder js-gallery-popup">
        <img src="https://picsum.photos/800/500" alt="" class="gallery-img">
      </div>
    </div>
  </div>
</div>

scss:

html
  background: #F7E4C5
.content
  position: relative
  display: block
  width: 100%
  padding: 20px
.content-title
  display: block
  margin-bottom: 40px
  font-size: 25px
  line-height: 27px
  font-family: Helvetica, sans-serif
.gallery
  position: relative
  display: block
  max-width: 500px
  max-height: 300px
  margin: auto
  border-radius: 4px
  overflow: hidden
  .slick-list
    overflow: hidden
  .slick-slide
    outline: none !important
.gallery-arrow
  position: absolute
  top: 50%
  transform: translateY(-50%)
  width: 40px
  height: 40px
  font-size: 14px
  font-family: Helvetica, sans-serif
  line-height: 40px
  text-align: center
  background-color: #E6E6E6
  z-index: 10
  cursor: pointer
  transition: background .3s ease
  &:hover
    background: #D0DFE6
  &.mod-prev
    left: 0
    border-radius: 0 4px 4px 0
  &.mod-next
    right: 0
    border-radius: 4px 0 0 4px

.gallery-item
  position: relative
  float: left
  vertical-align: middle
  text-align: center
.gallery-img-holder
  display: inline-block
  width: auto
  height: auto
  max-width: 500px
  max-height: 500px
.gallery-img
  width: 100%
  height: 100%
.slick-lightbox
  .slick-arrow
    z-index: 10

Результат