In this post, we’ll learn step by step how to create a content slider using pure CSS. I got this idea from a Codepen user named Cassidy, created in MARCH 4, 2016. Many new coders look for code snippets online. They use Codepen a lot, but sometimes they need help using the codes in their projects. A small change can mess up the whole design. There aren’t many places that help with this problem. That’s why I made this post. I want to make it easy for you to understand. Don’t forget to look at my other Codepen tutorial posts to learn more.
Step by Step Guide How to make a Text Slider with Pure CSS
In this post, I will first guide you step by step through the creation of a content slider that moves vertically. Then, I will provide additional guidance and code to show you how to modify the slider to move horizontally. I will also include code to pause the slider when you hover over it.
Html Structure for Content Slider
The HTML structure for this content slider is relatively straightforward. It consists of a div with the class content-slider which contains another div with the class slider. Inside the slider div, there’s a div with the class mask that contains an unordered list (ul). Each list item (li) represents a slide and has a unique class (anim1, anim2, etc.). Each slide contains two div elements, one for the quote and one for the source of the quote.
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Hello, this is a quote from a person.</div>
<div class="source">- Person</div>
</li>
<li class="anim2">
<div class="quote">This is another quote from another person.</div>
<div class="source">- Another Person</div>
</li>
<li class="anim3">
<div class="quote">Yet another quote from yet another person.</div>
<div class="source">- Yet Another Person</div>
</li>
</ul>
</div>
</div>
</div>
CSS For Content Slider
The body is styled with a specific font. The content-slider is given a width of 100% and a height of 360px. The slider is given a height of 320px, a width of 680px, and centered with auto margins. The mask is given a height of 320px and its overflow is hidden to ensure that only one slide is visible at a time.
The ul inside the slider is given a margin and padding of 0 and positioned relative to its parent. Each li (slide) is given a width of 680px, a height of 320px, positioned absolutely, and initially placed outside the visible area (top: -325px). The quote and source inside each slide are given specific font sizes and styles.
body {
font-family: 'Droid Serif', serif;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
Animation For Text Slider
Now Start our content slider main part:
The animation is achieved using CSS animations and keyframes. Each slide (li) is given an animation property with a unique animation name (e.g., cycle, cycle2, etc.), a duration of 15s, a linear timing function, and set to repeat infinitely.
The @keyframes rule is used to create the animation. For example, the cycle animation changes the top property and the opacity of the slide at different points during the animation to create the sliding and fading effect. The z-index property is also manipulated to ensure the correct stacking order of the slides.
The other animations (cycle2, cycle3, etc.) follow a similar pattern but start at different points in time to create a continuous sliding effect.
.slider li.anim1 {
-webkit-animation: cycle 15s linear infinite;
animation: cycle 15s linear infinite;
}
@keyframes cycle {
0%, 4%, 16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20%, 96% {
top: 325px;
opacity: 0;
z-index: 0;
}
21%, 50%, 92% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: 0px;
opacity: 1;
}
}Output:
How to Change Slider Movement From Vertical to Horizontal?
To change the movement of the slider from vertical to horizontal, you would need to adjust the properties being animated. Instead of animating the top property, you would animate the left property. For example, in the cycle animation, you would change top: 0px; to left: 0px;, top: 325px; to left: 680px; (assuming the width of the slide is 680px), and top: -325px; to left: -680px;.
@keyframes cycle {
0%, 4%, 16% {
left: 0px;
opacity: 1;
z-index: 0;
}
20%, 96% {
left: 680px;
opacity: 0;
z-index: 0;
}
21%, 50%, 92% {
left: -680px;
opacity: 0;
z-index: -1;
}
100% {
left: 0px;
opacity: 1;
}
}Output:
Please note that this code will only work for the first slide (li.anim1). If you have multiple slides, you’ll need to create additional animations (cycle2, cycle3, etc.) with different starting times, similar to the original vertical sliding code, if you want to know about the full version of this. Please check out the below section.
Full Code of Horizontal CSS Content Slider
Html:
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Hello, this is a quote from a person.</div>
<div class="source">- Person</div>
</li>
<li class="anim2">
<div class="quote">This is another quote from another person.</div>
<div class="source">- Another Person</div>
</li>
<li class="anim3">
<div class="quote">Yet another quote from yet another person.</div>
<div class="source">- Yet Another Person</div>
</li>
</ul>
</div>
</div>
</div>CSS:
body {
font-family: 'Droid Serif', serif;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
width: 680px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
width: 2040px; /* 680px * number of slides */
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
left: 680px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim1 {
-webkit-animation: cycle1 30s linear infinite;
animation: cycle1 30s linear infinite;
}
.slider li.anim2 {
-webkit-animation: cycle2 30s linear infinite;
animation: cycle2 30s linear infinite;
}
.slider li.anim3 {
-webkit-animation: cycle3 30s linear infinite;
animation: cycle3 30s linear infinite;
}
@keyframes cycle1 {
0%, 33.33% {
left: 0px;
opacity: 1;
}
36.67%, 100% {
left: -680px;
opacity: 0;
}
}
@keyframes cycle2 {
0%, 33.33% {
left: 680px;
opacity: 0;
}
36.67%, 66.67% {
left: 0px;
opacity: 1;
}
70%, 100% {
left: -680px;
opacity: 0;
}
}
@keyframes cycle3 {
0%, 66.67% {
left: 680px;
opacity: 0;
}
70%, 100% {
left: 0px;
opacity: 1;
}
}In this version, each slide starts off-screen to the right (left: 680px;), moves to the center of the screen (left: 0px;), and then moves off-screen to the left (left: -680px;). The animations are staggered so that when one slide moves off-screen to the left, the next slide moves in from the right. The animation duration has been increased to 30s to allow each slide to be visible for a longer period of time. However, if you prefer a faster transition between slides, you can simply decrease the animation duration to 15 seconds.
How to Increase the Number of Slides?
To increase the number of slides. You would need to add more list items (li) in the HTML and create additional animations in the CSS. Here’s how you can do it for five slides:
How to Pause the Content Slider on Hover?
To pause the animation on hover, you can use the animation-play-state property in CSS. Here’s the code snippet:
.slider li:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}This code will pause the animation of the slide when you hover over it. When you move your mouse away from the slide, the animation will resume.