Menu
I have a simple text slider which contains 5 elements, unfortunately, the slide shows only three items.
Here is my jsfiddle: live demo
Here is my HTML so far.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="slider-wrapper">
I can write
<div class="slider">
<div class="slider-text1">HTML</div>
<div class="slider-text2">Java</div>
<div class="slider-text3">PHP</div>
<div class="slider-text4">SOCIAL.</div>
<div class="slider-text5">LOUD.</div>
</div>
</div>
</div>
</body>
Here is my CSS for the animation.
html,body {
margin: 0;
width: 100%;
height: 100%;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider-wrapper {
font-size: 40px;
color:#aaa;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.slider{
height: 50px;
padding-left:15px;
overflow: hidden;
}
.slider div {
color:#fff;
height: 50px;
margin-bottom: 50px;
padding: 2px 15px;
text-align: center;
box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 3s linear infinite;
}
.slider-text2 {
background: skyblue;
}
.slider-text3 {
background: lightcoral;
}
.slider-text4 {
background: green;
}
.slider-text5 {
background: orange;
}
@keyframes slide {
0% {margin-top:-300px;}
5% {margin-top:-200px;}
33% {margin-top:-200px;}
38% {margin-top:-100px;}
66% {margin-top:-100px;}
71% {margin-top:0px;}
100% {margin-top:0px;}
}
What do I need to change in my code so that all elements should appear in my slider? any help or suggestions will be appreciated.
904
html,body {
margin: 0;
width: 100%;
height: 100%;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider-wrapper {
font-size: 40px;
color:#aaa;
font-weight: bold;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
.slider{
height: 50px;
padding-left:15px;
overflow: hidden;
}
.slider div {
color:#fff;
height: 50px;
margin-bottom: 50px;
padding: 2px 15px;
text-align: center;
box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 4s linear infinite;
}
.slider-text2 {
background: skyblue;
}
.slider-text3 {
background: lightcoral;
}
.slider-text4 {
background: green;
}
.slider-text5 {
background: orange;
}
@keyframes slide {
0% {margin-top:-500px;}
8% {margin-top:-500px;}
16% {margin-top:-400px;}
24% {margin-top:-400px;}
32% {margin-top:-300px;}
40% {margin-top:-300px;}
48% {margin-top:-200px;}
56% {margin-top:-200px;}
64% {margin-top:-100px;}
72% {margin-top:-100px;}
80% {margin-top:0px;}
88% {margin-top:0px;}
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="slider-wrapper">
I can write
<div class="slider">
<div class="slider-text1">HTML</div>
<div class="slider-text2">CdfddfSS</div>
<div class="slider-text3">PHP</div>
<div class="slider-text4">SOCIAL.</div>
<div class="slider-text5">LOUD.</div>
</div>
</div>
</div>
</body>
answered Dec 24 '25 06:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With