DEV Community

Cover image for Automatic Image Slider using only HTML & CSS

Automatic Image Slider using only HTML & CSS

Shantanu Jana on September 13, 2021

In this article, you will learn how to create an automatic image slider using only HTML and CSS. Earlier I shared with you many more types of manua...
Collapse
 
gmvelasco profile image
GMVelasco

Hi, @shantanu_jana ! I followed it down to a T, copied and pasted as I went through the steps, even downloaded the code and pasted the whole thing, but it keeps getting me the same result -- the images are all stacked up beside each other on the first slide, and the succeeding slides blank. Help!

Collapse
 
gmvelasco profile image
GMVelasco

Update:
Pasting the whole downloaded code onto Visual Studio Code, it works. But not on codepen.io.

Collapse
 
shantanu_jana profile image
Shantanu Jana
Collapse
 
avwerosuotrust profile image
avwerosuotrust

Same with me

Collapse
 
dynamichacker786 profile image
Dynamichacker786

Awesome

Collapse
 
tensh1mp_ profile image
tai ron

is there a way to change the size of the slideshow?

Collapse
 
shantanu_jana profile image
Shantanu Jana

It's very simple,

.container{
width: 85vmin; / * Add your preferred size here * /
position: absolute;
transform: translate (-50%, - 50%);
top: 50%;
left: 50%;
overflow: hidden;
border: 10px solid #ffffff;
border-radius: 8px;
box-shadow: 10px 25px 30px rgba (0,0,0,0.3);
}

Collapse
 
tensh1mp_ profile image
tai ron

how about enlarging the images inside of the slideshow

Collapse
 
tonttutolvanteri profile image
TonttuTolvanteri

Doesn't work with mozilla or opera or anything else but chrome

Collapse
 
brunobarross profile image
Altamiro Bruno

Very Nice!!!

Collapse
 
narrowlook profile image
Kayrat MedeshoV

My pictures getting half/ Help me pls
jsfiddle.net/Kayrat/2jecmdos/264/

Collapse
 
shantanu_jana profile image
Shantanu Jana • Edited

DoneπŸ‘ link: jsfiddle.net/z48yag3j/