Мобильная версияОднако! Я также хочу, чтобы изображения (в частности, их классы) загружались вперед, чтобы создать иллюзию бесконечной петли, который не отскочит. But when I try to do this, no matter the adjustments, it always jumps back to the beginning, specifically the second picture, for some reason.
Here is the code:
/* Ensures the body takes up at least the full viewport height and centers content */
body {
min-height: 100vh;
display: grid;
place-items: center;
}
/* Styles the main slider container */
.slider {
height: 250px;
margin: auto;
position: relative;
width: 90%;
display: grid;
place-items: center;
overflow: hidden;
/* Prevents overflowing content */
perspective: 100px;
/* Adds slight 3D depth effect */
}
/* Tracks the sliding images */
.slide-track {
display: flex;
width: calc(250px * 8);
/* 8 slides, each 250px wide */
animation: scroll 16s ease-in-out infinite;
/* Smooth transition with pauses */
}
/* Keyframes for smooth scrolling with pauses */
@keyframes scroll {
0%,
10% {
transform: translateX(0);
}
/* Pause at first image */
15%,
25% {
transform: translateX(calc(-250px * 1));
}
/* Move and pause at second image */
30%,
40% {
transform: translateX(calc(-250px * 2));
}
45%,
55% {
transform: translateX(calc(-250px * 3));
}
60%,
70% {
transform: translateX(calc(-250px * 4));
}
75%,
85% {
transform: translateX(calc(-250px * 5));
}
90%,
100% {
transform: translateX(calc(-250px * 6));
}
/* Loop back */
}
/* Styles each individual slide */
.slide {
height: 200px;
width: 250px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
/* Ensures images fill their container */
img {
width: 100%;
}
/* Gradient Shadows - Create fade effects on the left and right of the slider */
.slider::before,
.slider::after {
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
content: '';
height: 100%;
position: absolute;
width: 15%;
/* Fades take up 15% of the slider width */
z-index: 2;
}
/* Positions the left gradient */
.slider::before {
left: 0;
top: 0;
}
/* Positions the right gradient and flips it */
.slider::after {
right: 0;
top: 0;
transform: rotate(180deg);
}< /code>
< /code>
< /div>
< /div>
< /p>
Я попытался проконсультироваться с Chatgpt 4o, чтобы помочь мне придумать решение, но, возможно, мои вопросы были не в порядке, потому что это на самом деле не сделало. Вместо этого он сфокусирован на «невидимой иллюзии» и сделал внезапный прыжок, вместо гладких переходов, которые были до этого момента. Переходы с легкостью (поэтому движение является естественным).
✔ нет Javascript, если это возможно (чистое решение CSS).
Лучший подход: непрерывный шатер Scroll < /p>Проблема с текущей настройкой заключается в том, что @KeyFrames снимает положение после достижения конца, что вызывает «прыжок назад». Чтобы исправить это, нам нужна бесшовная прокрутка зацикливания с использованием непрерывного движущегося дорожки.
Решение: < /p>Duplicate the images to ensure a smooth transition when looping.
Use a continuous, infinite animation that moves the images left without stopping.
When the first set of images moves completely out, it appears again without a gap (by ensuring we have two sets moving together).
Ease-in-out still applies to make the motion feel natural.
< /code>
Окончательный рабочий код (чистый CSS, не требуется JS!)/* Ensure body is centered */body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f8f8f8;
}
/* Slider container */
.slider {
height: 250px;
width: 80%;
overflow: hidden;
position: relative;
}
/* Track that moves continuously */
.slide-track {
display: flex;
width: calc(250px * 8);
/* Enough width for both original and duplicated images */
animation: scroll 16s linear infinite;
}
/* Individual slides */
.slide {
width: 250px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
/* Images */
img {
width: 100%;
}
/* Continuous scrolling keyframes */
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-250px * 4));
/* Moves one full set left */
}
}< /code>
< /code>
< /div>
< /div>
< /p>
Как это работает < /p>✔ бесконечная прокрутка иллюзия: без перерывов назад! Дублированные изображения делают это как непрерывная цикл.
✔ Feel-Out Ofter: Линейная анимация сохраняет жидкость для движения, но вы можете настроить скорость, чтобы замедлить ее.
✔ Не требуется JavaScript!
< /h2>Первоначально я бы хотел, чтобы Chatgpt не включал JavaScript, так как это всегда вроде беспорядка с его предложениями, по моему опыту < /p>
Но надеюсь, что есть кто -то, кто может мне помочь, я очень новичок в программировании (как размышляет моя программа), но я хотел бы узнать больше. И если это включает в себя JavaScript, то пусть!>
Подробнее здесь: https://stackoverflow.com/questions/794 ... lling-loop
