Image gallery with horizontal scroll – 30 seconds of code


<div class="gallery-container">
  <div class="thumbnails"></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 
  position: relative;
  display: flex;
  justify-content: center;


.thumbnails 
  position: absolute;
  bottom: 8px;
  display: flex;
  flex-direction: row;
  gap: 6px;


.thumbnails div 
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: #aaa;
  border-radius: 100%;


.thumbnails div.highlighted 
  background-color: #777;


.slides 
  margin: 0 16px;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  width: 540px;
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x 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');
const slides = slideGallery.querySelectorAll('div');
const thumbnailContainer = document.querySelector('.thumbnails');
const slideCount = slides.length;
const slideWidth = 540;

const highlightThumbnail = () => 
  thumbnailContainer
    .querySelectorAll('div.highlighted')
    .forEach(el => el.classList.remove('highlighted'));
  const index = Math.floor(slideGallery.scrollLeft / slideWidth);
  thumbnailContainer
    .querySelector(`div[data-id="$index"]`)
    .classList.add('highlighted');
;

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

thumbnailContainer.innerHTML += [...slides]
  .map((slide, i) => `<div data-id="$i"></div>`)
  .join('');

thumbnailContainer.querySelectorAll('div').forEach(el => 
  el.addEventListener('click', () => scrollToElement(el));
);

slideGallery.addEventListener('scroll', e => highlightThumbnail());

highlightThumbnail();



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

What My New Wedding DJ Clients DO NOT Want – Tuesday DJ Gig Tips

Next Article

Fiskum Fruktpresseri: A juicy business | Scan Magazine

Related Posts