Hey friends, today in this blog you’ll learn how to create a Fully Responsive Image Slider using only HTML & CSS. In the earlier blog, I have shared how to create a Javascript Form Validation and now it’s time to create a Responsive Image Slider in HTML & CSS.
You easily create a Responsive Image Slider Using HTML and CSS then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some information about this Responsive Image Slider
There is a show image with the next & prev button. normally show one image and another image hide. when click the next & prev button slide other images. In the case of the manual, you need to change the image using the Next and Previous buttons. it is fully responsive for any kind of device including mobile phones.
Watch the video tutorial to create Pure CSS Image Slider
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this Pure CSS Image Slider step by step completely beautifully. So you can learn how to make these Pure CSS Image Slider. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Pure CSS Image Slider Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Complete JavaScript Form Validation
- Animated Profile Card Design Using HTML CSS and Javascript
- E-commerce Product Card UI Design Using HTML & CSS
Responsive Image Slider | Source Codes
You have to create HTML & CSS File For this menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Slider</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<input type="radio" id="i1" name="images" checked />
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<input type="radio" id="i4" name="images" />
<input type="radio" id="i5" name="images" />
<div class="slide_img" id="one">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<label class="prev" for="i5"><span>‹</span></label>
<label class="next" for="i2"><span>›</span></label>
</div>
<div class="slide_img" id="two">
<img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
<label class="prev" for="i1"><span>‹</span></label>
<label class="next" for="i3"><span>›</span></label>
</div>
<div class="slide_img" id="three">
<img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">
<label class="prev" for="i2"><span>‹</span></label>
<label class="next" for="i4"><span>›</span></label>
</div>
<div class="slide_img" id="four">
<img src="http://wallpaperswide.com/download/big_hero_6_baymax-wallpaper-1152x720.jpg">
<label class="prev" for="i3"><span>‹</span></label>
<label class="next" for="i5"><span>›</span></label>
</div>
<div class="slide_img" id="five">
<img src="https://cdn.gobankingrates.com/wp-content/uploads/2019/05/Davao-City-in-the-Phillippines-shutterstock_504042466.jpg">
<label class="prev" for="i4"><span>‹</span></label>
<label class="next" for="i1"><span>›</span></label>
</div>
<div id="nav_slide">
<label for="i1" class="dots" id="dot1"></label>
<label for="i2" class="dots" id="dot2"></label>
<label for="i3" class="dots" id="dot3"></label>
<label for="i4" class="dots" id="dot4"></label>
<label for="i5" class="dots" id="dot5"></label>
</div>
</div>
</body>
</html>CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
body, html{
width: 100%;
height: 100%;
margin: 0;
font-family: 'Just Another Hand', cursive;
overflow-X: hidden;
}
#i1, #i2, #i3, #i4, #i5{ display: none;}
.container{
margin: 0 auto;
margin-top: 50px;
position: relative;
width: 70%;
height: 0;
padding-bottom: 38%;
user-select: none;
background-color: #1c1c1c;
border: solid 10px #616161;
border-radius:10px ;
}
.container .slide_img{
position: absolute;
width: 100%;;
height: 100%;
}
.container .slide_img img{
width: inherit;
height: inherit;
}
.prev, .next{
width: 12%;
height: inherit;
position: absolute;
top:0;
background-color: rgba(88, 88, 88,.2);
color:rgba(244, 244, 244,.9);
z-index: 99;
transition: .45s;
cursor: pointer;
text-align: center;
}
.next{right:0;}
.prev{left:0;}
label span{
position: absolute;
font-size: 100pt;
top: 50%;
transform: translateY(-50%);
}
.prev:hover, .next:hover{
transition: .3s;
background-color: rgba(88, 88, 89,.8);
color: #ffffff;
}
.container #nav_slide{
width: 100%;
bottom: 12%;
height: 11px;
position: absolute;
text-align: center;
z-index: 99;
cursor: default;
}
#nav_slide .dots{
top: 20px;
width: 14px;
height: 14px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
transition: .4s;
}
#nav_slide .dots:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.9);
transition: .25s
}
.slide_img{z-index: -1;}
#i1:checked ~ #one ,
#i2:checked ~ #two ,
#i3:checked ~ #three,
#i4:checked ~ #four ,
#i5:checked ~ #five
{z-index: 9; animation: scroll 1s ease-in-out;}
#i1:checked ~ #nav_slide #dot1,
#i2:checked ~ #nav_slide #dot2,
#i3:checked ~ #nav_slide #dot3,
#i4:checked ~ #nav_slide #dot4,
#i5:checked ~ #nav_slide #dot5
{ background-color: rgba(255,255,255,.9);}
@keyframes scroll{
0%{ opacity:.4;}
100%{opacity:1;}
}
@media screen and (max-width: 685px){
.container{
border: none;
width: 100%;
height: 0;
padding-bottom: 55%;
}
label span { font-size: 50pt; }
.prev, .next{
width: 15%;
}
#nav_slide .dots{
width: 12px;
height: 12px;
}
}
@media screen and(min-width: 970px){
.me{ display: none;}
}
now you’ve successfully created this Responsive Image Slider using HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code with the image.
Hi, I think your blog might be having browser compatibility issues.
When I look at your blog in Firefox, it looks fine but when opening in Internet
Explorer, it has some overlapping. I just wanted to give you a quick heads up!
Other then that, excellent blog!
Thanks for sharing your thoughts. I truly appreciate
your efforts and I will be waiting for your further write
ups thank you once again.
Useful info. Fortunate me I discovered your site by accident, and I
am shocked why this twist of fate didn’t came about earlier!
I bookmarked it.