Skip to content s

 Home
 Categories
o
o
o
o
o
o
o
 How To
 Resources



o
o
o
o
o
o
o




Automatic Image Slider in HTML & CSS with

Source Code
December 6, 2021 by Ashfaq Ahmed
Spread the love
 DEMO DOWNLOAD
Looking for a solution to create an automatic image slider with the help of HTML
& CSS? Check out the demo and download the source code of this multi-photo
Carousel.

You surely try out many JavaScript or jQuery sliders for your website. But how
about one build with CSS only? You may be thinking such sliders are limited in
their functionality, right?

But with the help of CSS3 animations, we are able to build a nice-looking & multi-
function slider. One such function is called automation and we can create a CSS-
only slider that supports the automatic function.

Such sliders allow us to automatically slide the images within the time limit we set
through CSS animation functions.

In this tutorial, I will build the slider which will move the images from the right to
left automatically without adding any kind of JavaScript.
Furthermore, you can also convert this slider into a text or content base automatic
slider by simply removing the tag img and place the text.

Properly, you don’t know that the JavaScript slider slows down your site or
webpage. Additionally, they don’t work well if the user has disabled the JavaScript
interpretation in the browser.
One of the best solutions to this problem is don’t use the slider or go with the CSS
build slideshow.

Create HTML for Automatic Slider

We will start the HTML with a hidden element. It’s an input type checkbox with a
unique ID and a class. This class will help us to control the label.

The label actually will be a toggle button which will we can switch ON/OFF to
play the slider automatically. When we set the toggle ON, the slider images will
automatically slide from right to left.
1. <input id="sliderSwitch" class="slider__switch" type="checkbox"
name="sliderSwitch" hidden />

The next step for HTML source code is to define the images for the slider and for
this, We will create a div with a class name slider. We will place the images with
the help of the unordered list element to keep the HTML nice and clean.

For each list element, we have a class name slider__slide.

1. <div class="slider">
2. <ul class="slider__list">
3. <li class="slider__slide"><img
src="https://source.unsplash.com/rHi-KR_NA24/650x420" alt="Slide
image number 1 with plane" /></li>
4. <li class="slider__slide"><img
src="https://source.unsplash.com/FxU8KV7psMY/650x420" alt="Slide
image number 2 with Golden Gate Bridge" /></li>
5. <li class="slider__slide"><img
src="https://source.unsplash.com/Aa8_X_YgrO4/650x420" alt="Slide
image number 3 with Flatiron Building in New York" /></li>
6. <li class="slider__slide"><img
src="https://source.unsplash.com/8bzsuFNkiT8/650x420" alt="Slide
image number 4 with mountain climber" /></li>
7. </ul>
8. </div>

Finally, We will define our last HTML element controller.

1. <div class="slider__control">
2. <label for="sliderSwitch"></label>
3. </div>
Apply Styling Over Slider
Now we will apply the styling over the slider to make it work with HTML. We will
start with base styles that are our body of the page and of course a fallback for the
hidden attribute.
1. /**
 2. * Base
3. */
4. body {
5. font-size: 100%;
6. background: #cedce3;
7. }
8.  
9. /* Fallback for hidden attribute */
10.hidden {
11. display: none;
12.}

The basic styling starts from here. We will apply position relative to .slider so the
absolute position works with list items.
Moreover, We will add some margin, width/height according to our need, and box-
shadow to stand out the slider.
1. .slider {
2. position: relative;
3. margin-top: 3rem;
4. margin-right: auto;
5. margin-left: auto;
6. overflow: hidden;
7. width: 40.625rem;
8. height: 26.25rem;
9. box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
10.}
11..slider__list {
12. position: absolute;
13. left: 0;
14. width: 162.5rem;
15.}
16..slider__slide {
17. float: left;
18.}

In order to create an automatic image slider in HTML, the following CSS code is
required. Also, add it to your project.
1. .slider__control {
2. margin-right: auto;
3. margin-left: auto;
4. width: 4.5rem;
5. font-family: sans-serif;
6. }
7. .slider__control label {
8. position: relative;
9. display: block;
10. margin-top: 2rem;
11. margin-bottom: 1rem;
12. width: 4.5rem;
13. height: 2rem;
14. font-size: 1rem;
15. font-weight: normal;
16. line-height: 1.5;
 17. color: transparent;
18. background: #ddd;
19. border-radius: 2rem;
20. cursor: pointer;
21. -webkit-transition: left 0.15s ease-out;
22. transition: left 0.15s ease-out;
23.}
24..slider__control label:before {
25. content: "autoplay";
26. position: absolute;
27. top: 2.5rem;
28. left: 0;
29. color: #333;
30. font-size: .95rem;
31. font-weight: bold;
32. text-transform: uppercase;
33.}
34..slider__control label:after {
35. content: "";
36. position: absolute;
37. top: .25rem;
38. left: .25rem;
39. display: block;
40. width: 1.5rem;
41. height: 1.5rem;
42. border-radius: 2rem;
43. background: #fff;
44. -webkit-transition: left 0.15s ease-out;
45. transition: left 0.15s ease-out;
46. -webkit-transform: translate3d(0, 0, 0);
47. transform: translate3d(0, 0, 0);
48.}
49..slider__switch:checked + .slider > .slider__list {
50. -webkit-animation-name: autoplay;
51. animation-name: autoplay;
52. /* This will change the time it takes to move to next slide */
53. -webkit-animation-duration: 10s;
54. animation-duration: 10s;
55. -webkit-animation-iteration-count: infinite;
56. animation-iteration-count: infinite;
57.}
58..slider__switch:checked + .slider + .slider__control > label
{ background: #455a64; }
59..slider__switch:checked + .slider + .slider__control > label:after
{ left: 2.75rem; }

To enable the autoplay function, We will use the CSS3 animation. We will set a
different position for each slide so they move accordingly.
1. @-webkit-keyframes
2. autoplay { /* position of the first slide */
3. 0% {
4. left: 0;
5. }
6. /* position of the second slide */
7. 25% {
 8. left: -40.625rem;
9. }
10. /* position of the third slide */
11. 50% {
12. left: -81.25rem;
13.}
14. /* position of the fourth slide */
15. 100% {
16. left: -121.875rem;
17.}
18.}
19.@keyframes
20.autoplay { /* position of the first slide */
21. 0% {
22. left: 0;
23.}
24. /* position of the second slide */
25. 25% {
26. left: -40.625rem;
27.}
28. /* position of the third slide */
29. 50% {
30. left: -81.25rem;
31.}
32. /* position of the fourth slide */
33. 100% {
34. left: -121.875rem;
35.}
36.}
Conclusion
That’s it. We are done with the slider and it’s ready for implementation. You can
check out the demo and download the source code.

Just to mention here, It will not overload your site and also consumes less browser
memory. It will also work if the Javascript is disabled in the browser.
CategoriesCSS Slideshow TagsImage Slider
Share it!
You May Also Like

CSS Hexagon Image with Border

Pure CSS 3D Coverflow Image Slider

Photo Gallery for Website HTML Code with Demo

Image Slideshow in HTML CSS Code with Demo

3D Images Slideshow using HTML and CSS

3D Cube Image Rotator using CSS3 Animation

4 thoughts on “Automatic Image Slider in HTML & CSS with

Source Code”

1.
Joe
January 2, 2021 at 2:20 am
I’m liking your slider but there is one thing that isn’t all that obvious. That is
the slide display duration. Even though you can change the rate of transition,
the length of display is always the same and the last slide always transitions
slower than all the rest. What’s up?
Reply


Muhammad Asif
January 4, 2021 at 1:01 pm
 Hello Joe!
You need to change the value of animation-duration instead of
transition.

.slider__switch:checked + .slider > .slider__list {

/* This will change the time it takes to move to next slide */
-webkit-animation-duration: 20s;
animation-duration: 20s;
}

2.
Peter Quackenbush
January 23, 2021 at 11:33 pm
Your Slideshow works great; but, My question regards to BACKGROUND
Image Slideshow Auto-Scrolling, as I have Open-Close Curtains [= working
perfectly] that COVER your Slideshow ….

But the situation remains that, while your Auto-Scrolling shows up ALSO
[= working perfectly], it IS SHOWING UP OVER the curtains, and NOT
BEHIND them …

Both, codes for the Curtains and Slideshow still work PERFECTLY
simultaneously, except for the Slideshow BEHIND the Curtains …

I am sure that it is something to do with LAYERED Coding, or not?

Please advise at your earliest convenience …

Best of Regards
Reply


Muhammad Asif
January 25, 2021 at 11:06 am
Hello Peter!
Yes, you need to use the z-index property if you have placed your
images as a background but slides are behind the Curtains. You
can bring the slides to the front using:

.slider__slide{
z-index: 999;
}

Leave a Comment
Comment

  Don't subscribe  Notify me of followup comments via e-mail. You can

also subscribe without commenting.

Post Comment

Recommended

Fixed Background Image Scrolling Content

May 14, 2019


Pure CSS Image Comparison Slider

March 19, 2020


HTML Image Zoom on Click using JavaScript

October 5, 2020
You Might Like:

CSS OVERLAY   IMAGE SLIDER   SLIDE ANIMATION   CSS GALLERY   PROGRESS BAR   FLIP
ANIMATION   STICKY HEADER   PARALLAX BACKGROUND

Most Popular Post


 Create a Comment Box in HTML and CSS
March 31, 2021


Responsive Automatic Image Slider with CSS

February 22, 2020


HTML Expand Collapse Text without JavaScript

December 28, 2019

 Home
 About Us
 Contact us
 License
 Disclaimer
 DMCA
 Terms & Conditions
© 2021 Codeconvey.com - All rights reserved.