In this article, we are going to learn how to create a simple image slider using HTML, CSS, and JavaScript only. Here, we are not using any external frameworks/plugins for slider.
Our Best Popular Projects & Posts
| Post | Link |
|---|---|
| School Management System With Full Source Code In php | click here |
| ecommerce project in php | click here |
| simple login and registration form in php | click here |
| Synopsis for online rooms booking project based on PHP | click here |
| add multiple images in codeigniter | click here |
| beginners project in php with source code | click here |
| dynamic country state dropdown in codeigniter | click here |
| how to generate pdf using dompdf in codeigniter | click here |
| add 1 day to current date in php | click here |
| how to check website/blog responsive or not? | click here |
| employee attendance management system project in php with source code | click here |
| Select one checkbox and disable others | click here |
| printing div content with css applied | click here |
| best restaurants management system in php | click here |
| Preview an image before it is uploaded using jquery | click here |
| text editor in jquery | click here |
| data table with export button in html | click here |
| add multiple images in codeigniter | click here |
| codeigniter some steps to install on Your server | click here |
| ajax in php/codeigniter | click here |
| Create Simple API CRUD with PHP and MySQL | click here |
| How to integrate bootstrap theme in codeigniter | click here |
| how to prepare for interview | click here |
| Convert a date format in PHP | click here |
| how to export html table to excel in jquery | click here |
| how to create duplicate google peg using ajax | click here |
| how to make dropdown searchable in html using jquery | click here |
| how to find retirement date in php | click here |
| online food order system in php with source code | click here |
| school management project admin panel in php | click here |
Step 1
Create a folder named “images” in the project path and put all the images required for the slider. Make sure that all the images are in the same size (width*height). Otherwise, the slider will misbehave while navigating between slides.
Step 2
Add the below code in body section of the HTML page.
Add the below code in body section of the HTML page.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#my-custom-slider-demo {
display: block;
overflow: hidden;
position: relative;
}
#my-custom-slider-demo #sidebar-slider-prev,
#my-custom-slider-demo #sidebar-slider-next {
background-color: rgba(0,0,0,0.5);
color: #FFF;
cursor: pointer;
display: inline-block;
font-size: 32px;
height: 48px;
line-height: 42px;
opacity: 0;
padding: 0;
position: absolute;
text-align: center;
top: calc(50% - 24px);
transition: 0.2s all;
width: 48px;
z-index: 5;
}
#my-custom-slider-demo #sidebar-slider-next {
right: 0;
}
#my-custom-slider-demo:hover #sidebar-slider-prev,
#my-custom-slider-demo:hover #sidebar-slider-next{
opacity: 1;
}
#my-custom-slider-demo .widget_media_image {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top:0;
transition: 0.8s all;
z-index: 0;
width: 100%;
}
#my-custom-slider-demo .widget_media_image:first-of-type,
#my-custom-slider-demo .widget_media_image.active {
opacity: 1;
z-index: 1;
}
#my-custom-slider-demo .widget_media_image img {
height: auto;
width: 100%;
}
#my-custom-slider-demo .widget_media_image b {
background-color: rgba(0,0,0,0.5);
bottom: 0;
color: #FFF;
display: inline-block;
font-size: 14px;
left: 0;
padding: 10px 20px;
position: absolute;
text-transform: uppercase;
}
@media all and (max-width: 600px) {
#my-custom-slider-demo .widget_media_image b {
display: none;
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="my-custom-slider-demo" class="sidebar-slider">
<a id="sidebar-slider-prev" onclick="customNavToPrevSlide()"> ❮ </a>
<a id="sidebar-slider-next" onclick="customNavToNextSlide()"> ❯ </a>
<div id="demo-slide1" class="widget_media_image">
<b class="widget-title">Slide 1 Title</b>
<a href="#"><img width="700" height="200" src="db.jpg"></a>
</div>
<div id="demo-slide2" class="widget_media_image">
<b class="widget-title">Slide 2 Title</b>
<a href="#"><img width="700" height="200" src="NANU.jpg"></a>
</div>
<div id="demo-slide3" class="widget_media_image">
<b class="widget-title">Slide 3 Title</b>
<a href="#"><img width="700" height="200" src="photo3.jpg"></a>
</div>
</div>
</body>
<script type="text/javascript">
let currentSlide = 0, theSlides = document.getElementsByClassName('widget_media_image'), customSliderTimer, next, prev, theWrapper = document.getElementById('my-custom-slider-demo');
function customNavToNextSlide() {
next = ( currentSlide < theSlides.length - 1 ) ? currentSlide + 1 : 0;
customSetCurrentSlide(next);
}
function customNavToPrevSlide() {
prev = ( currentSlide > 0 ) ? currentSlide - 1 : theSlides.length - 1;
customSetCurrentSlide(prev);
}
function customSetCurrentSlide(to) {
clearInterval(customSliderTimer);
for (let i = 0; i < theSlides.length; i ++) {
if ( currentSlide == i ) {
theSlides[currentSlide].classList.remove('active');
}
if ( next == i ) {
theSlides[to].classList.add('active');
}
}
currentSlide = to;
customSliderStart();
}
function customSliderStart() {
customSliderTimer = setInterval(function() {
customNavToNextSlide();
}, 5000);
}
function customSliderInit() {
let height = theSlides[0].getElementsByTagName('img')[0].height;
theWrapper.style.height = height + 'px';
for (let i = 0; i < theSlides.length; i ++) {
theSlides[i].style.height = height + 'px';
}
}
if (typeof theSlides !== 'undefined') {
window.addEventListener('resize', customSliderInit);
customSliderInit();
if ( theSlides.length > 1 ) {
customSliderStart();
}
}
</script>
</html>
0 Comments