Scribd
Upload
1 views

Swiper CSS

The document contains HTML and CSS code for a slider animation featuring multiple red items sliding from right to left across a blue background. It utilizes CSS variables for width, height, and quantity of items, with an animation delay calculated based on the item's position. The JavaScript code assigns a unique turn value to each item to control the animation timing.

Uploaded by

babbba48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views

Swiper CSS

The document contains HTML and CSS code for a slider animation featuring multiple red items sliding from right to left across a blue background. It utilizes CSS variables for width, height, and quantity of items, with an animation delay calculated based on the item's position. The JavaScript code assigns a unique turn value to each item to control the animation timing.

Uploaded by

babbba48
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

animation-delay: calc((10s / var(--quant)) * (var(--turn) - 1));<!

DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
<style>
:root{
--width:100px;
--turn:0;
--height:100px;
--quant:10;
}
.slider{

background-color: blue;
display: flex;
position: relative;
max-width: calc(var(--width) * var(--quant));
height:100px;
overflow: hidden;
}
.slider .item{
background-color: red;
width:100px;
height: 100px;
position: absolute;
left: 100%;
border: 1px solid black;
animation: slide 10s linear infinite;

animation-delay:calc((10s/var(--quant))*(var(--turn)-1));

}
@keyframes slide {
from{
left:100%;
}
to{
left:calc(var(--width)*-1);
}

</style>
</head>
<body>

<div class="slider">
<div class="item" style="--turn: 0"></div>
<div class="item" style="--turn: 1"></div>
<div class="item" style="--turn: 2"></div>
<div class="item" style="--turn: 3"></div>
<div class="item" style="--turn: 4"></div>
<div class="item" style="--turn: 5"></div>
<div class="item" style="--turn: 6"></div>
<div class="item" style="--turn: 7"></div>
<div class="item" style="--turn: 8"></div>
<div class="item" style="--turn: 9"></div>
</div>
</body>

<script>
let clas= document.getElementsByClassName('item');

</script>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root{
--width: 100px;
--turn: 0;
--height: 100px;
--quant: 10;
}
.slider{
background-color: blue;
position: relative;
width: calc(var(--width) * var(--quant));
height: var(--height);
overflow: hidden;
}
.slider .item{
background-color: red;
width: var(--width);
height: var(--height);
position: absolute;
left: 100%;
border: 1px solid black;
animation: slide 10s linear infinite;
animation-delay: calc((10s / var(--quant)) * (var(--turn) - 1));
}
@keyframes slide {
from {
left: 100%;
}
to {
left: calc(var(--width) * -1);
}
}
</style>
</head>
<body>
<div class="slider">
<div class="item" style="--turn: 0"></div>
<div class="item" style="--turn: 1"></div>
<div class="item" style="--turn: 2"></div>
<div class="item" style="--turn: 3"></div>
<div class="item" style="--turn: 4"></div>
<div class="item" style="--turn: 5"></div>
<div class="item" style="--turn: 6"></div>
<div class="item" style="--turn: 7"></div>
<div class="item" style="--turn: 8"></div>
<div class="item" style="--turn: 9"></div>
</div>
</body>
<script>
let items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
items[i].style.setProperty('--turn', i);
}
</script>
</html>

You might also like