网站 - 旋转图库 （CSS / Javascript）

问：

我对编码相当陌生，作为第一个项目，我正在为我的雇主创建一个网站。 作为本网站的第三部分，我有一个照片库 - 当单击图像（直接或使用按钮）时，它会放大 - 带有“.active”类。 问题是我希望这个 .active 类图像在库容器的中间完全可见，并且整个库应该旋转（在最后一个图像之后，又有第一个图像，依此类推）。 我尝试用 ChatGPT 解决这个问题，但一无所获。由于我对 Javascript 的经验很少（仍在学习），我无法自己解决这个问题。

代码如下：

  <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......