website - rotating gallery (CSS / Javascript)

Question

I'm fairly new to coding and as a first project I'm creating a website for my employer. As the third section of this website I have a photo gallery - when Image is clicked (directly or with button) it's enlarged - with the ".active" class. The issue is that I want this .active class image to be visible exactly in the middle of a gallery container and the whole gallery should be rotating (After last image, there is first again and so on). I've tried working this issue with ChatGPT but led to nowhere. Since I have very little experience with Javascript (still learning) I can't fix this on my own.

Code is below:

  <section class="Gallery">
        <button class="prevButton">Previous</button>

        <div class="GalleryContainer">
            <div class="Image one active">
                <p class="ImageText">ENDLESS WAVE</p>
            </div>
            <div class="Image two">
                <p class="ImageText">INTERESTING TOM</p>
            </div>
            <div class="Image three">
                <p class="ImageText">ZOMBIE</p>
            </div>
           <!-- rest of the images (20 in total)-->
        </div>
        
         <button class="nextButton">Next</button>
    </section>    

<script>// Get the gallery container and images
    const galleryContainer = document.querySelector('.GalleryContainer');
    const images = Array.from(galleryContainer.querySelectorAll('.Image'));
    
    // Get the buttons for navigation
    const prevButton = document.querySelector('.prevButton');
    const nextButton = document.querySelector('.nextButton');
    
    // Function to handle image click
    function handleImageClick(event) {
      const clickedImage = event.target;
    
      // Check if the clicked image is already active
      const isActive = clickedImage.classList.contains('active');
    
      // Remove "active" class from all images
      images.forEach(image => {
        image.classList.remove('active');
      });
    
      // Add "active" class to the clicked image if it was not active, or remove it if it was active
      if (!isActive) {
        clickedImage.classList.add('active');
      }
    }
    
    // Function to handle previous button click
    function handlePrevButtonClick() {
      const activeImage = galleryContainer.querySelector('.active');
      const prevImage = activeImage.previousElementSibling || images[images.length - 1];
    
      activeImage.classList.remove('active');
      prevImage.classList.add('active');
    }
    
    // Function to handle next button click
    function handleNextButtonClick() {
      const activeImage = galleryContainer.querySelector('.active');
      const nextImage = activeImage.nextElementSibling || images[0];
    
      activeImage.classList.remove('active');
      nextImage.classList.add('active');
    }
    
    // Add click event listener to each image
    images.forEach(image => {
      image.addEventListener('click', handleImageClick);
    });
    
    // Add click event listeners to the navigation buttons
    prevButton.addEventListener('click', handlePrevButtonClick);
    nextButton.addEventListener('click', handleNextButtonClick);
    </script>





    <style>
    .Gallery{
    width: 100%;
    height: auto;
    background: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/FotoJet2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.GalleryContainer{
    width: 100%;
    max-width: 1920px;
    height: 550px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: no-wrap;
    overflow: auto;
    align-items: flex-end;
    margin: 0 20px;
    padding: 50px 0;
}
.Image{
    max-width: 70px;
    min-width: 50px;
    height: 400px;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    object-fit: cover;
    border-radius: 40px;
    overflow: hidden;
    margin: 10px;
    transition: all linear 0.4s;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    font-size: 1px;
    border: 3px solid #063137;
}
.active{
    min-width: 380px;
    height: 430px;
    background-size:cover;
    background-position:bottom;
    opacity: 1;
    border-radius: 20%;
    margin: 0 10px;
    overflow: hidden;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px black;
    letter-spacing: 1px;
}
.ImageText{
    padding: 3px 120px 0px 20px;
    border-radius: 0px 10px 10px 0px;
    background-color: #B81414;
}
.prevButton, .nextButton{}


.one{
    background-image: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/DSC_0170.jpg);
    
}
.two{
    background-image: url(/home/adam/Plocha/Stars-Projects/BocaBar/Adamneces.github.io/resources/Photo/ALL/DSC_0177.jpg);
}
.three, .four, etc......

Answer 1

const galleryContainer = document.querySelector('.GalleryContainer');
const images = Array.from(galleryContainer.querySelectorAll('.Image'));

// Function to center the active image
function centerActiveImage() {
  const activeImage = galleryContainer.querySelector('.active');
  const activeImageWidth = activeImage.offsetWidth;
  const activeImageHeight = activeImage.offsetHeight;
  const galleryContainerWidth = galleryContainer.offsetWidth;
  const galleryContainerHeight = galleryContainer.offsetHeight;

  activeImage.style.left = (galleryContainerWidth - activeImageWidth) / 2;
  activeImage.style.top = (galleryContainerHeight - activeImageHeight) / 2;
}

// Function to loop the gallery
function loopGallery() {
  const activeImage = galleryContainer.querySelector('.active');
  const nextImage = activeImage.nextElementSibling || images[0];

  activeImage.classList.remove('active');
  nextImage.classList.add('active');
}

// Add event listeners
window.addEventListener('load', centerActiveImage);
images.forEach(image => {
  image.addEventListener('click', loopGallery);
});

.Gallery {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.GalleryContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 500px;
  overflow: auto;
}

.Image {
  max-width: 150px;
  max-height: 150px;
  border-radius: 10px;
  margin: 10px;
  transition: all 0.5s ease-in-out;
}

.Image:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.Image.active {
  transform: scale(1.1);
  border: 2px solid #000;
}

.ImageText {
  font-size: 16px;
  color: #000;
  margin-top: 10px;
}

.prevButton, .nextButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.prevButton {
  margin-left: auto;
}

.nextButton {
  margin-right: auto;
}

<!DOCTYPE html>
<html>
<head>
  <title>Photo Gallery</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="Gallery">
    <button class="prevButton">Previous</button>
    <div class="GalleryContainer">
      <div class="Image one active">
        <p class="ImageText">ENDLESS WAVE</p>
      </div>
      <div class="Image two">
        <p class="ImageText">INTERESTING TOM</p>
      </div>
      <div class="Image three">
        <p class="ImageText">ZOMBIE</p>
      </div>
      <!-- rest of the images (20 in total) -->
    </div>
    <button class="nextButton">Next</button>
  </section>
</body>
</html>

//try this and get back to me if it doesn't work