Это мощный метод повышения визуальной привлекательности вашего сайта и удобства взаимодействия с пользователем. Это руководство покажет вам, как создать бесшовный, бесконечный слайдер, который будет плавно работать на всех устройствах без необходимости использования JavaScript.
-min.png)
Что такое бесконечный слайдер?
Бесконечный слайдер или непрерывная карусель - это элемент дизайна, который бесконечно перемещается по серии изображений или контента. Это создает привлекательный визуальный эффект, который может привлечь внимание посетителей и удержать их дольше на вашем сайте.
Преимущества использования CSS для бесконечных слайдеров
CSS-анимация, как правило, более эффективна, чем ее аналоги в JavaScript. Они используют механизм рендеринга браузера, что обеспечивает более плавную анимацию и лучшую производительность, особенно на мобильных устройствах.
Использование только CSS снижает сложность вашего кода. Нет необходимости во внешних библиотеках или функциях JavaScript, что упрощает обслуживание и устранение неполадок вашего проекта.
Современный CSS широко поддерживается во всех основных браузерах. Это обеспечивает единообразный пользовательский опыт независимо от используемого устройства или браузера.
<body>
<main>
<div class="slider" style="
--width: 100px;
--height: 50px;
--quantity: 10;
">
<div class="list">
<div class="item" style="--position: 1"><img src="images/slider1_1.png" alt=""></div>
<div class="item" style="--position: 2"><img src="images/slider1_2.png" alt=""></div>
<div class="item" style="--position: 3"><img src="images/slider1_3.png" alt=""></div>
<div class="item" style="--position: 4"><img src="images/slider1_4.png" alt=""></div>
<div class="item" style="--position: 5"><img src="images/slider1_5.png" alt=""></div>
<div class="item" style="--position: 6"><img src="images/slider1_6.png" alt=""></div>
<div class="item" style="--position: 7"><img src="images/slider1_7.png" alt=""></div>
<div class="item" style="--position: 8"><img src="images/slider1_8.png" alt=""></div>
<div class="item" style="--position: 9"><img src="images/slider1_9.png" alt=""></div>
<div class="item" style="--position: 10"><img src="images/slider1_10.png" alt=""></div>
</div>
</div>
<div class="slider" reverse="true" style="
--width: 200px;
--height: 200px;
--quantity: 9;
">
<div class="list">
<div class="item" style="--position: 1"><img src="images/slider2_1.png" alt=""></div>
<div class="item" style="--position: 2"><img src="images/slider2_2.png" alt=""></div>
<div class="item" style="--position: 3"><img src="images/slider2_3.png" alt=""></div>
<div class="item" style="--position: 4"><img src="images/slider2_4.png" alt=""></div>
<div class="item" style="--position: 5"><img src="images/slider2_5.png" alt=""></div>
<div class="item" style="--position: 6"><img src="images/slider2_6.png" alt=""></div>
<div class="item" style="--position: 7"><img src="images/slider2_7.png" alt=""></div>
<div class="item" style="--position: 8"><img src="images/slider2_8.png" alt=""></div>
<div class="item" style="--position: 9"><img src="images/slider2_9.png" alt=""></div>
</div>
</div>
</main>
</body>
* {
padding:0;
margin:0;
border:none;
}
body{
margin: 0;
background-color: #e5e5e5;
}
main{
width: min(1200px, 90vw);
margin: auto;
}
.slider{
width: 100%;
height: var(--height);
overflow: hidden;
mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);
}
.slider .list{
display: flex;
width: 100%;
min-width: calc(var(--width) * var(--quantity));
position: relative;
}
.slider .list .item{
width: var(--width);
height: var(--height);
position: absolute;
left: 100%;
animation: autoRun 10s linear infinite;
transition: filter 0.5s;
animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) )!important;
}
.slider .list .item img{
width: 100%;
}
@keyframes autoRun{
from{
left: 100%;
}to{
left: calc(var(--width) * -1);
}
}
.slider:hover .item{
animation-play-state: paused!important;
filter: grayscale(1);
}
.slider .item:hover{
filter: grayscale(0);
}
.slider[reverse="true"] .item{
animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay{
from{
left: calc(var(--width) * -1);
}to{
left: 100%;
}
}
Заключение
Создание эффекта бесконечного слайдера с использованием только CSS - эффективный способ добавить динамичные и привлекательные элементы на ваш сайт. Следуя шагам, описанным в этом руководстве, вы можете создать цельный, оптимизированный по производительности слайдер, который улучшит взаимодействие с пользователем и удержит интерес посетителей. Используйте возможности CSS, чтобы упростить свой код и создавать потрясающие визуальные эффекты.
0 Комментарии