Updated June 12, 2023

Introduction to Pure CSS slider

Pure CSS Slider is defined as a rich slider that helps add text links or any other elements on the slider container that allows creating arrow navigation and fulfills the customer needs while very easy to understand. Additionally, it is user-friendly and helps to fit the website layout with a side-by-side scroll. CSS slider is very responsive and does support all devices.

Syntax

There is no format syntax here, but it takes a different form when creating a box and image placer. Let’s look at this,

<div class = "slider name"> </div>
// To have CSS Styles
.slidername
{ // width and height declaration ;
}
// Next buttons to be clicked
.slider
{ transform : ….
}

How to Create a Slider in Pure CSS?

Before we start, this article should have a follow-up on the basic understanding of CSS and the functional image slider. The potential of Pure CSS is to create a well-formed animation on the Slider of images. Here it uses a checkbox for active slides and the navigation purpose.CSS3, along with the transition effect, uses a slideshow.

When we change a CSS value in the code, instant changes occur. We have a Transition property with four categories to get back to the old state from the new state.

Transition-property
Transition-duration
Timing Function
Transition-delay

The animation should be implemented as a slider part to see how to create a slider in Pure CSS. The slider acts as a container in which an image is placed. Generally, a sliding concept portion moves left to right, and the image is placed in front. If the respective object is resized, the images are pulled apart. To accommodate properly, we need to make a few arbitrary changes. The first step is to define the main wrapper in <div> element and define buttons or checkboxes to handle the slide part. To define a keyframe interval, it is obvious to use translateX and translate property.

Examples

In the following section, we shall see the code implementation in CSS and HTML and animation effects.

Example #1

Simple Slider with the text

.html

<section class="demoslide">
<div class="s_container sli">
<img src="https://chrome.google.com/webstore/detail/spring-flowers-hd-wallpap/eaamhhinficbcjelgmkdpmigmombilna"/>
<div class="t_cont">
<p> hi,this is an image which has tulip flowers to view.</p>
</div>
<imgsrc="https://chrome.google.com/webstore/detail/spring-flowers-hd-wallpap/eaamhhinficbcjelgmkdpmigmombilna"/>
<p> This Image has an nature feel </p>
<img src="https://www.superiorwallpapers.com/images/lthumbs/2016-07/11961_Red-and-pink-flowers-wonderful-nature.jpg"/>
</div>
</section>
<p class="p">This is an creation blog. <a href="http://www.sitepoint.com/you-dont-need-javascript-for-that" target="_blank">View the site</a>.</p>

.css

body{padding: 4em;background-color: #00bfff;}
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
.demoslide {
width: 700px;
margin: 0.1 auto;
overflow: hidden;
border: solid 1.5px white;
}
.s_container {
width: 3000px;
font-size: 0.5;
transition: 1s ease;
height: 500px;
}
.s_container:hover {
animation-play-state: paused;
}
img, .t-cont {
width: 615px;
height: auto;
display: inline-block;
font-size: 14px;
text-align: center;
}
.t-cont {
height: 215px;
position: relative;
}
p {
position: relative;
top: -42%;
padding: 4px;
}
.sli {
animation: slide 22s ease infinite;
}
@keyframes sli {
0% {
transform: translateX(0%);
}
11.5% {
transform: translateX(0%);
}
22% {
transform: translateX(-22%);
}
36.1% {
transform: translateX(-22%);
}
45% {
transform: translateX(-45%);
}
60.5% {
transform: translateX(-46%);
}
71% {
transform: translateX(-71%);
}
87.5% {
transform: translateX(-75%);
}
95% {
transform: translateX(-71%);
}
100% {
transform: translateX(0);
}
}
.p {
margin-top: 150px;
text-align: center;
}

Explanation

In the above code snippets, we had set the position to absolute and relative, with background images and expanding the area with size. All elements have a default starting point set.

Output:

Example #2

.html

<ul class="demotwo">
<li>
<input type="checkbox" id="sli1" name="image" checked>
<label for="sli1"></label>
<img src="https://static.one.io/wp-content/uploads/sites/28/2018/02/holland-tulip-season-aaatttt.jpg" alt="box 1">
</li>
<li>
<input type="checkbox" id="sli2" name="image2">
<label for="sli2"></label>
<img src="https://www.pexels.com/photo/red-dahlia-flower-60597/" alt="box 2">
</li>
<li>
<input type="checkbox" id="sli3" name="image3">
<label for="sli3"></label>
<img src="https://www.pexels.com/photo/red-dahlia-flower-60597/" alt="box 3">
</li>
<li><a href="http://cssslider.com/">
<input type="checkbox" id="sli4" name="image4">
<label for="sli4"></label>
<img src="https://www.pexels.com/photo/red-dahlia-flower-60597/" alt="box 4"></a>
</li>
</ul>

.css

* {
margin: 0.1;
padding: 0.1;
}
html {
background-color: #ffcccc;
background-image: radial-gradient(oval, hsla(0,0%,100%,.2), hsla(0,0%,0%,.72)),
linear-gradient(left, transparent 48%, hsla(0,0%,0%,.02) 48%);
background-position: 45% 70%, 51% 52%;
background-repeat: no-repeat, repeat;
background-size: 140% 140%, 2em 2em;
font-size: 90%;
min-height: 95%;
}
.demotwo {
background-color: #00ffbf;
box-shadow: inset 1 1 3px hsla(0,0%,0%,.3),
0 2px 3px hsla(0,0%,100%,.70),
0 -2px 2px 3px hsla(0,0%,0%,.2);
height: 17.1em;
left: 51%;
margin: -6.775em -12em;
padding: .4em;
position: absolute;
top: 45%;
width: 22em;
}
.demotwo:before {
background-color:   #996666 ;
bottom: -2em;
box-shadow: inset 1 1px 2px 2px hsla(0,0%,90%,.1),
inset 0 -1px 2px hsla(0,0%,0%,.5),
0 6px 49px hsla(0,0%,0%,.21),
0 15px 15px -12px hsla(0,0%,0%,.2),
0 28px 22px -16px hsla(0,0%,0%,.12),
0 35px 21px -16px hsla(0,0%,0%,.2);
content: '';
left: -2.1em;
position: absolute;
right: -2.1em;
top: -2.1em;
z-index: 0;
}
.demotwo:after {
background-color: #fff5e5;
bottom: -1.5em;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
content: '';
left: -1.5em;
position: absolute;
right: -1.5em;
top: -1.5em;
z-index: -1;
}
.demotwo li {
box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
list-style:none;
position: absolute;
}
.demotwo input {
display: none;
}
.demotwo label {
background-color: #111;
background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
border: .2em solid transparent;
bottom: .5em;
border-radius: 100%;
cursor: pointer;
display: block;
height: .5em;
left: 24em;
opacity: 0;
position: absolute;
transition: .25s;
width: .5em;
visibility: hidden;
z-index: 10;
}
.demotwo label:after {
border-radius: 100%;
bottom: -.2em;
box-shadow: inset 0 0 0 .2em #111,
inset 0 2px 2px #000,
0 1px 1px hsla(0,0%,100%,.25);
content: '';
left: -.2em;
position: absolute;
right: -.2em;
top: -.2em;
}
.demotwo:hover label {
opacity: 1;
visibility: visible;
}
.demotwo input:checked + label {
background-color: #bfff00;
}
.demotwo:hover li:nth-child(1) label {
left: .8em;
}
.demotwo:hover li:nth-child(2) label {
left: 2.5em;
}
.demotwo:hover li:nth-child(3) label {
left: 3em;
}
.demotwo:hover li:nth-child(4) label {
left: 4em;
}
.demotwo img {
height: 17.75em;
opacity: 1;
transition: .22s;
width: 23em;
vertical-align: top;
visibility: hidden;
}
.demotwo li input:checked ~ img {
opacity: 1.2;
visibility: visible;
z-index: 8;
}

Explanation

The above code has more slide images to slide with. Therefore the output looks like

Output:

Conclusion

Coming to an end, the outline of this article is all about pure CSS in modern Browsers, and we explored creating CSS and its styles. And we have used a lot of CSS properties that support new-version browsers too.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to Pure CSS slider

How to Create a Slider in Pure CSS?

Examples

Example #1

Example #2

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email