CSS sliders can help to slide multiple tags in a single place. We can slide the slider with the click or time delay function. The CSS properties help to slide the container page with the text, images, videos, or user-interactive functions.
How to Create a CSS Slider
The following steps are used to create a CSS slider.
- The Create tag is for displaying slides on the web page.
- Create a link, tag or symbol for the slides, the tag as a slider.
- We can add CSS properties to create a slider for the multiple tags.
Examples
The provided instances demonstrate the slider featuring an appealing and interactive user function.
Example 1:
The provided illustration demonstrates a simple CSS slider featuring a clickable button for navigation.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.CSS_slider {
width: 320px;
text-align: center;
overflow: hidden;
}
.CSS_slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.CSS_slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.CSS_slides::-webkit-scrollbar-track {
background: transparent;
}
.CSS_slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.CSS_slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.CSS_slider > a {
display: inline-flex;
width: 1.4rem;
height: 1.4rem;
background: yellow;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 60%;
margin: 0 0 0.5rem 0;
position: relative;
}
.CSS_slider > a:active {
top: 1px;
}
.CSS_slider > a:focus {
background: #000;
}
/* Does not require button navigation */
@supports (scroll-snap-type) {
.CSS_slider > a {
display: none;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
font-family: 'Ropa Sans', sans-serif;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<h2> CSS Slider </h2>
<b> We can see the slider with the text message! </b>
<div class = "CSS_slider">
<a href = "#CSS_slide-1"> 1 </a>
<a href = "#CSS_slide-2"> 2 </a>
<a href = "#CSS_slide-3"> 3 </a>
<a href = "#CSS_slide-4"> 4 </a>
<a href = "#CSS_slide-5"> 5 </a>
<div class = "CSS_slides">
<div id = "CSS_slide-1">
CSS
</div>
<div id = "CSS_slide-2">
HTML
</div>
<div id = "CSS_slide-3">
JS
</div>
<div id = "CSS_slide-4">
JAVA
</div>
<div id = "CSS_slide-5">
PHP
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The output shows the CSS slider with the text.
Example 2:
The provided demonstration illustrates a fundamental CSS slider. We have the ability to adjust the animation delay property for the slider slides over a specified duration.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
#CSS_slide1 {
height: 10em;
position: relative;
background:beige;
}
#CSS_slide1 > * {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
animation: 10s autoplay1 infinite;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
font-family: 'Ropa Sans', sans-serif;
}
@keyframes autoplay1 {
0% {visibility: visible}
33.33% {visibility: hidden}
}
#CSS_slide1 > *:nth-child(1) {animation-delay: 0s}
#CSS_slide1 > *:nth-child(2) {animation-delay: 4s}
#CSS_slide1 > *:nth-child(3) {animation-delay: 8s}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<h2> CSS Slider with Time </h2>
<b> We can see the slider with the animated and delay time! </b>
<div id = CSS_slide1>
<div>
<h1> This is the First Slid </h1>
<p> First Slide </p>
</div>
<div>
<h1>This is the Second Slid</h1>
<p> Second slide </p>
</div>
<div>
<h1> This is the Third Slid </h1>
<p> Third Slide </p>
</div>
</div>
</div>
</body>
</html>
Output:
The result displays the CSS slider along with the relevant details.
Example 3:
The illustration displays the preceding and subsequent tags concerning the information slider. Users can access the preceding tag to navigate to the last page or the next tag to proceed to the following page.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
html,
body {
height: 100%;
margin: 0px;
}
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(250, 0, 265) 0%,
rgb(265, 155, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 400px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}
.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.CSS_Slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> We can see the slider with the text message! </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text"> First Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"></a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Second Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"></a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Third Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"></a>
</div>
<div id = "CSS_Slides4" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Fourth Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides3" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides1" title = "Prev"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The output shows the CSS slider with the text.
Example 4:
The illustration displays the preceding and succeeding links for the data slider. Users can access the previous link for the final page or the subsequent link for the forthcoming page.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(250, 0, 265) 0%,
rgb(265, 155, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 350px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}
.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.CSS_Slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 78%;
width: 35px;
height: 35px;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> CSS Slider : We can see the slider with the text message! </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text"> First Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"> Previous </a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"> Next </a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Second Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"> Previous </a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"> Next </a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<span class = "CSS_Slide__text"> Third Slide </span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"> Previous </a>>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"> Next </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The output shows the CSS slider with the text.
Example 5:
The CSS slider with an image is demonstrated in the following example.
Example
<!DOCTYPE html>
<html>
<head>
<title> CSS Slider </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
html,
body {
height: 100%;
margin: 0px;
}
.CSS_Slider-container {
background: linear-gradient(
149deg,
rgb(270, 0, 265) 0%,
rgb(265, 175, 0) 100%
);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.CSS_Slider {
width: 100%;
max-width: 600px;
height: 380px;
margin: 20px;
text-align: center;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.CSS_Slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.CSS_Slide:nth-of-type(even) {
background-color: rgb(255, 266, 222);
}
.CSS_Slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.CSS_Slide a {
background: none;
border: none;
}
a.CSS_Slide__prev,
.CSS_Slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 5%;
}
a.CSS_Slide__next,
.CSS_Slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 5%;
}
.CSS_Slider::before,
.CSS_Slider::after,
.CSS_Slide__prev,
.CSS_Slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.CSS_Slider::before,
.CSS_Slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
</style>
</head>
<body style="background-color: #EEF9FD;">
<div class = "main_div">
<b> CSS Slider : We can see the slider with the image! </b>
<div class = "CSS_Slider-container">
<div class = "CSS_Slider">
<div class = "CSS_Slides">
<div id = "CSS_Slides1" class = "CSS_Slide">
<span class = "CSS_Slide__text"> <img srcset="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
</span>
<a class = "CSS_Slide__prev" href = "#CSS_Slides4" title = "Next"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides2" title = "Next"></a>
</div>
<div id = "CSS_Slides2" class = "CSS_Slide">
<img srcset="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides1" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides3" title = "Next"></a>
</div>
<div id = "CSS_Slides3" class = "CSS_Slide">
<img srcset="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides2" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides4" title = "Next"></a>
</div>
<div id = "CSS_Slides4" class = "CSS_Slide">
<img srcset="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
<a class = "CSS_Slide__prev" href = "#CSS_Slides3" title = "Prev"></a>
<a class = "CSS_Slide__next" href = "#CSS_Slides1" title = "Prev"></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
The output shows the CSS slider with an image.
Conclusion
CSS sliders showcase a variety of texts, data, and images within a single webpage. This feature allows developers to efficiently present a large amount of content in a compact space, enhancing user interaction.