In this article how to create a cool slider image calendar design template design using HTML, CSS, and simple easy to understand and modify the template as can and instead of classic look and create look class saves you some time, and our template satisfaction And download button below.
A slider is a bunch of row images set that can navigate between the content here we create how to make a cool slider image calendar design template in Html and CSS and the main role of the slider is an example of a website what the website should show and automatically change or swiped by users.
Here, we can create two empty file
- Index.html
- Style.css
Here, the code below just copy and paste on your code editor and modify as you can.
Index.html
<html>
<head>
<title>cool slider image calendar design template in Html and CSS</title>
</head>
<body>
<div class="calendar">
<div class="date">
<div class="h3color">
<h3 >August</h3>
</div>
<div class="content-around">
<div class="days">
<div class="day">Sun</div>
<div class="day">Mon</div>
<div class="day">Tue</div>
<div class="day">Wed</div>
<div class="day">Thu</div>
<div class="day">Fri</div>
<div class="day">Sat</div>
<div class="number"></div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
<div class="number">10</div>
<div class="number">11</div>
<div class="number">12</div>
<div class="number active">13</div>
<div class="number">14</div>
<div class="number">15</div>
<div class="number">16</div>
<div class="number">17</div>
<div class="number">18</div>
<div class="number">19</div>
<div class="number">20</div>
<div class="number">21</div>
<div class="number">22</div>
<div class="number">23</div>
<div class="number">24</div>
<div class="number">25</div>
<div class="number">26</div>
<div class="number">27</div>
<div class="number">28</div>
<div class="number">29</div>
<div class="number">30</div>
<div class="number">31</div>
</div>
</div>
<div class="slideshow">
<div class="image">
<div class="myslides fade">
<img src="img/8.jpg">
</div>
<div class="myslides fade">
<img src="img/9.jpg">
</div>
<div class="myslides fade">
<img src="img/7.jpg">
</div>
</div>
</div>
<div style="text-align:center;display:none;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div>
</div>
</body>
</html>
style.css
body{
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#F08080;
font-family:'poppins',sans-serif;
}
.calendar
{
position:relative;
background:#fff;
width:800px;
height:450px;
display:flex;
justify-content:space-between;
align-items:center;
border:15px solid #fff;
box-shadow:0 15px 35px rgba(0,0,0,.5);
}
.calendar .date{
width:400px;
padding:30px;
box-sizing:border-box;
}
.calendar .image{
position:absolute;
top:0;
right:0;
width:400px;
height:100%;
background:#000;
}
.calendar .image img{
width:400px;
height:100%;
background-position:contain;
}
.calendar .date h3{
margin-left:40px;
font-size:30px;
font-weight:500;
color:#fff;
}
.h3color
{
width:250px;
background-color:#F08080;
margin-left:-45px;
}
.calendar .date .days{
display:flex;
flex-wrap:wrap;
}
.calendar .date .days .day,
.calendar .date .days .number
{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1)
{
color:red;
}
.calendar .date .days .number.active{
background:#F08080;
color:#fff;
border-radius:50%;
cursor:pointer;
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
.slides{display:none;}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Just copy and paste before the body tags .
Slider Image Script
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
</script>
