Счетчик изображений перемещается, когда я пишу больше текста в абзаце, но это нормально, когда текст короткий ⇐ CSS

[Anonymous]

короткий текст
длинный текст

Код: Выделить всё

1 / 4


[img]https://i.ibb.co/MP25TzB/Chris-and-Anna-1-copy.webp[/img]
                    alt="Beautiful skies with some sushine"
/>
Chris and Anna
Forever starts here 💍

[img]https://i.ibb.co/JR0SjM1/Chris-and-Anna-2-copy.webp[/img]
                    alt="Beautiful skies with some sushine"
/>
Chris and Anna
Two hearts, one promise ❤️

[img]https://i.ibb.co/CtG7B4z/Chris-and-Anna-3-copy.webp[/img]
                    alt="Beautiful skies with some sushine"
/>
Chris and Anna
Brothers, united for the big day 🤵‍♂️

[img]https://i.ibb.co/vqcxBG0/Chris-and-Anna-4-copy.webp[/img]
                    alt="Beautiful skies with some sushine"
class="vertical"
/>
Chris and Anna
Her squad, his crew, together for the love of two 👰‍♀️🤵‍♂️



❮
❯

Код: Выделить всё

/* Photo grid */
.image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 40px;
background-color: black;
}

.image-item {
text-align: center;
color: white;
}

.image-item img {
max-width: 100%; /* Prevents the image from exceeding its container's width */
height: auto;
aspect-ratio: 3 / 2; /* Maintain aspect ratio */
object-fit: cover;
border-radius: 10px;
max-height: 400px; /* Adjust this value to control the height of the images */
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}

.image-item h3 {
font-size: 1.2em;
margin: 10px 0;
}

.image-item p {
font-size: 0.9em;
color: #ccc;
}

/* Carousel Styles */
.carousel {
position: relative; /* Make this container the reference for absolutely positioned elements */
width: 100%;
margin: 0 auto;
}

.carousel-container {
position: relative; /* Ensure the container is the reference for absolute positioning */
overflow: hidden; /* Prevent overflow of slides or elements */
}

.carousel-slides {
display: flex;
transition: transform 0.5s ease;
}

.carousel-slide {
position: relative; /* Ensure the slide is the reference for absolute positioning */
display: flex;
justify-content: center;
align-items: center;
flex-basis: 100%; /* Ensures each slide takes up the full width of the carousel */
}

.carousel-slide p {
flex-basis: auto;  /* Let the text adapt to its content size */
}

.image-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
}

.image-wrapper img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
border-radius: 10px;
max-height: 400px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
z-index: 0;
}

/* Horizontal images (3:2 aspect ratio) */
.carousel-slide img.horizontal {
aspect-ratio: 3 / 2; /* Force 3:2 aspect ratio */
object-fit: cover; /* Crop to fit */
width: 100%; /* Ensure the image fills the container width */
height: auto; /* Maintain aspect ratio */
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

/* Vertical images (2:3 aspect ratio) */
.carousel-slide img.vertical {
aspect-ratio: 2 / 3; /* Force 2:3 aspect ratio */
object-fit: contain; /* Maintain aspect ratio without cropping */
width: 100%; /* Ensure the image fills the container width */
height: auto; /* Maintain aspect ratio */
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.carousel-slide img {
max-width: 100%;
height: auto;
object-fit: contain; /*to maintain aspect ratio */
border-radius: 10px;
max-height: 400px;
margin-bottom: 15px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
flex-basis: auto; /* Allow images to take up only as much space as needed */
}

/* Counter */
.carousel-counter {
position: absolute;
top: 10px; /* Move the counter to the top */
left: 10px; /* Move the counter to the left */
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
z-index: 10;
pointer-events: none; /* Prevent interaction */
}

/* Navigation Buttons */
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10;
font-size: 24px;
}

.carousel-btn.prev {
left: 10px;

Здесь вы можете увидеть проблему
codepen
--если вы используете мобильное устройство, возможно, вы видите ее неправильно, у меня есть еще не оптимизирован для мобильных устройств.
Я попробовал обернуть изображение и счетчик карусели в новый относительно позиционированный элемент, попробовал переместить .carousel-counter в CSS. возможно, я неправильно обернул, но не могу найти ошибку.

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-fine-whe