Сайт - вращающаяся галерея (CSS/Javascript) ⇐ CSS

[Anonymous]

Я новичок в программировании, и в качестве первого проекта я создаю веб-сайт для своего работодателя.
В качестве третьего раздела этого веб-сайта у меня есть фотогалерея - при нажатии на изображение (напрямую или с помощью кнопка) он увеличен - с классом ".active".
Проблема в том, что я хочу, чтобы это изображение класса .active было видно точно в середине контейнера галереи, и вся галерея должна вращаться (после последнего изображения , снова есть первое и так on).
Я пытался решить эту проблему с помощью ChatGPT, но это ни к чему не привело. Поскольку у меня очень мало опыта работы с Javascript (все еще учусь), я не могу исправить это самостоятельно.
Код приведен ниже:

Previous


ENDLESS WAVE

INTERESTING TOM

ZOMBIE




Next


// 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);



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



Подробнее здесь: https://stackoverflow.com/questions/767 ... javascript