Automatic Image Slider with Pure CSS
Posted By : Monu Thakur | 30-Nov-2017
Just a simple automatic image slider that uses only right-to-left images, just pussy. I've seen a very serious parser in JavaScript, which slows webpages based on JavaScript and does not work if the user has disabled JavaScript in your browser. There is no one solution to this problem. Use this slider, but how do you use the slider without JavaScript? This article describes the response to business model of sliders without JavaScript. How to use:
<div class="slider">
<ul class="slider__list">
<li class="slider__slide"><img alt="Image 1" src="1.jpg" /></li>
<li class="slider__slide"><img alt="Image 2" src="2.jpg" /></li>
<li class="slider__slide"><img alt="Image 3" src="3.jpg" /></li>
<li class="slider__slide"><img alt="Image 4" src="4.jpg" /></li>
</ul>
</div>
Add a scroll bar to the web page.
<input class="slider__switch" hidden="" id="sliderSwitch" name="sliderSwitch" type="checkbox">
Style the image slider.
.slider {
position: relative;
margin-top: 3rem;
margin-right: auto;
margin-left: auto;
overflow: hidden;
width: 40.625rem;
height: 26.25rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.slider__list {
position: absolute;
left: 0;
width: 162.5rem;
}
.slider__slide {
float: left;
}
The CSS rules for the slider control.
.slider__control {
margin-right: auto;
margin-left: auto;
width: 4.5rem;
font-family: sans-serif;
}
.slider__control label {
position: relative;
display: block;
margin-top: 2rem;
margin-bottom: 1rem;
width: 4.5rem;
height: 2rem;
font-size: 1rem;
font-weight: normal;
line-height: 1.5;
color: transparent;
background: #ddd;
border-radius: 2rem;
cursor: pointer;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.slider__control label:before {
content: "autoplay";
position: absolute;
top: 2.5rem;
left: 0;
color: #333;
font-size: .95rem;
font-weight: bold;
text-transform: uppercase;
}
.slider__control label:after {
content: "";
position: absolute;
top: .25rem;
left: .25rem;
display: block;
width: 1.5rem;
height: 1.5rem;
border-radius: 2rem;
background: #fff;
-webkit-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slider__switch:checked + .slider > .slider__list {
-webkit-animation-name: autoplay;
animation-name: autoplay;
/* This will change the time it takes to move to next slide */
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.slider__switch:checked + .slider + .slider__control > label { background: #455a64; }
.slider__switch:checked + .slider + .slider__control > label:after { left: 2.75rem; }
Enable autoplay using CSS3 keyframes.
@-webkit-keyframes
autoplay { /* position of the first slide */
0% {
left: 0;
}
/* position of the second slide */
25% {
left: -40.625rem;
}
/* position of the third slide */
50% {
left: -81.25rem;
}
/* position of the fourth slide */
100% {
left: -121.875rem;
}
}
@keyframes
autoplay { /* position of the first slide */
0% {
left: 0;
}
/* position of the second slide */
25% {
left: -40.625rem;
}
/* position of the third slide */
50% {
left: -81.25rem;
}
/* position of the fourth slide */
100% {
left: -121.875rem;
}
}
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.