Slideshow using HTML and CSS | Automatic Slideshow Html Css
Learners have you ever observed that in some there is a specific section for product preview or it could use for many reasons. There is a function align as image get changed or get slid own by itself what we termed as there is slideshow is going. Slideshow is a special feature that is often available on the phone.
This is a similar function here as well. Pretty good isn’t it If you don’t know how we can design our web page, just join me on this blog and make sure your finger is free for scrolling down 😉.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design an image slideshow.
Apart from this how we design this is another level of interaction with the user. This shows a dynamic movement of page.
I hope you must have got an idea about the project.
Let’s have a look at our project.
After a limited time interval, there will image switch and it will preview as the same:
HTML SECTION
Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have following part in HTML section.
- Just we have 4 div with the class card we will set its height and width accordingly in the CSS file.
Go through the below code 👇 and run in your IDE or where you used to design just HTML without CSS styling.
<div class="card">
<div class="card_part card_part-one">
</div>
<!-- Photo 2 -->
<div class="card_part card_part-two">
</div>
<!-- Photo 3 -->
<div class="card_part card_part-three">
</div>
<!-- Photo 4 -->
<div class="card_part card_part-four">
</div>
</div>
CSS SECTION
By CSS we will design our card, set its specific width and height, or in each card, we will set a random image.
But here we have all cards in front of us. That we don’t want. So we will set its display property as all four cards will get aligned over one another.
by the animation property, we will set it for sliding.
The Below code will analyze you more👇. So just add in your HTML half complete file and wait to watch some magic.
*,
*::before,
*::after { box-sizing: border-box; }
html,
body {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #3c3c3c;
}
.card {
position: relative;
width: 700px;
height: 400px;
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
/*Light blue cover above the slide show*/
.card::after {
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 900;
display: block;
width: 100%;
height: 100%;
background-color: rgba(140, 22, 115, 0.2);
}
.card_part {
position: absolute;
top: 0;
left: 0;
z-index: 7;
display: flex;
align-items: center;
width: 100%;
height: 100%;
transform: translateX( 700px );
background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/1.jpg?raw=true );
animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
}
.card_part.card_part-two {
z-index: 6;
background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/2.jpg?raw=true );
animation-delay: 7s;
}
.card_part.card_part-three {
z-index: 5;
background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/3.jpg?raw=true );
animation-delay: 14s;
}
.card_part.card_part-four {
z-index: 4;
background-image: url( https://github.com/Flat-Pixels/assets_hosting/blob/master/picture_slides/4.jpg?raw=true );
animation-delay: 21s;
}
@keyframes opaqTransition {
3% { transform: translateX( 0 ); }
25% { transform: translateX( 0 ); }
28% { transform: translateX( -700px ); }
100% { transform: translateX( -700px ); }
}
For a live preview, you can follow the below codepen..
See the Pen Slideshow with HTML/CSS (Any Javascript) by VERDIEU Steeve (@flatpixels) on CodePen.
Through this blog… we have learned how we can design a slideshow image using g HTML and CSS.
Now I’m looking for your reviews.
So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.
You can follow me on Instagram
Written by @Ankit kumar
Code by VERDIEU
