Image gallery with vertical scroll – 30 seconds of code


<div class="gallery-container">
  <div class="thumbnails"></div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
  <div class="slides">
    <div><img src="https://picsum.photos/id/1067/540/720"></div>
    <div><img src="https://picsum.photos/id/122/540/720"></div>
    <div><img src="https://picsum.photos/id/188/540/720"></div>
    <div><img src="https://picsum.photos/id/249/540/720"></div>
    <div><img src="https://picsum.photos/id/257/540/720"></div>
    <div><img src="https://picsum.photos/id/259/540/720"></div>
    <div><img src="https://picsum.photos/id/283/540/720"></div>
    <div><img src="https://picsum.photos/id/288/540/720"></div>
    <div><img src="https://picsum.photos/id/299/540/720"></div>
  </div>
</div>

.gallery-container 
  display: flex;
  justify-content: center;


.thumbnails 
  display: flex;
  flex-direction: column;
  gap: 8px;


.thumbnails img 
  width: 40px;
  height: 40px;
  cursor: pointer;


.scrollbar 
  width: 1px;
  height: 720px;
  background: #ccc;
  display: block;
  margin: 0 0 0 8px;


.thumb 
  width: 1px;
  position: absolute;
  height: 0;
  background: #000;


.slides 
  margin: 0 16px;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(540px + 1rem);
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;


.slides > div 
  scroll-snap-align: start;


.slides img 
  width: 540px;
  object-fit: contain;


.slides::-webkit-scrollbar 
  display: none;

const slideGallery = document.querySelector('.slides"https://www.30secondsofcode.org/css/s/);
const slides = slideGallery.querySelectorAll('div"https://www.30secondsofcode.org/css/s/);
const scrollbarThumb = document.querySelector('.thumb"https://www.30secondsofcode.org/css/s/);
const slideCount = slides.length;
const slideHeight = 720;
const marginTop = 16;

const scrollThumb = () => 
  const index = Math.floor(slideGallery.scrollTop / slideHeight);
  scrollbarThumb.style.height = `$((index + 1) / slideCount) * slideHeightpx`;
;

const scrollToElement = el => 
  const index = parseInt(el.dataset.id, 10);
  slideGallery.scrollTo(0, index * slideHeight + marginTop);
;

document.querySelector('.thumbnails"https://www.30secondsofcode.org/css/s/).innerHTML += [...slides]
  .map(
    (slide, i) => `<img src="https://www.30secondsofcode.org/css/s/$slide.querySelector('img"https://www.30secondsofcode.org/css/s/).src" data-id="https://www.30secondsofcode.org/css/s/$i">`
  )
  .join('"https://www.30secondsofcode.org/css/s/);

document.querySelectorAll('.thumbnails img"https://www.30secondsofcode.org/css/s/).forEach(el => 
  el.addEventListener('click"https://www.30secondsofcode.org/css/s/, () => scrollToElement(el));
);

slideGallery.addEventListener('scroll"https://www.30secondsofcode.org/css/s/, e => scrollThumb());

scrollThumb();



Source link

Leave a Reply

Your email address will not be published.

Previous Article

Ordering CSS Declarations — dailydevlinks

Next Article

Calls for windfall tax mount as Shell announces bumper profits

Related Posts