5 Best HTML Image Slider

5 Best HTML Image Slider And Image Carousel

It is very hard to find the html image slider responsive but today I will share with you 5 best html image slider which will help your in your web site development and dynamic sites.

Download Bes HTML Code Editor Click here

HTML All tags list with example

1. Basic HTML Image Slider

<!DOCTYPE html>
<html>
<head>
	<title>GSS TECHNOLOGY</title>
	<meta charset="utf-8">
	<meta name="meyword" content="how to use meta tags in HTML">
	<meta name="descriptin" content="tags in html are those tags which use for html page SEO content and about the websites which are you developing.">
	<meta name="author" content="SHARAFAT HUSSAIN">
	<meta http-equiv="refresh" content="20">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="slider.js"></script>
        <!--5 Best HTML Image Slider-->
	
</head>

<body>
<h1>HTML Basic Slider</h1>
<div id="slideshow">
  <div>
    <img src="image/slide1.jpg" width="800" height="300">
  </div>
  <div>
    <<img src="image/slide2.jpg"width="900" height="350">
  </div>
  <div>
    Pretty cool eh? This slide is proof the content can be anything.
  </div>
</div>


</body>
</html>

Add the style.css file in your project

#slideshow { 
  margin: 0px auto; 
  position: relative; 
  width: 900px; 
  height: 300px; 
  padding: 10px; 
  box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
  position: absolute; 
  top: 10px; 
  left: 10px; 
  right: 10px; 
  bottom: 10px; 
}

Add slider.js file in your project

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
  .fadeOut(1000)
  .next()
  .fadeIn(1000)
  .end()
  .appendTo('#slideshow');
}, 3000);

2. HTML CSS Image Animation

5 Best HTML Image Slider
<!DOCTYPE html>
<html>
<head>
	<title>HTML CSS IMAGE SLIDER</title>
</head>
<!--5 Best HTML Image Slider-->
<body>
<H2>HTML CSS IMAGE SLIDER</H2>
<div class="maindiv">
	
</div>
</body>
</html>
<style type="text/css">
	body{
		background-color: rgba(27,31,34,0.85);
	}
	h2{
		font-size: 2.1rem;
		text-align: center;
		color:white;
		line-height: 1.4;
		letter-spacing: 0.5rem;
		margin-top: 20px;

	}
	.maindiv{
       width: 70%;
       height: 300px;
       position: absolute;
       top: 57%;
       left:50%;
       transform: translate(-50%, -50%);
      background: url('../image/slide1.jpg');
      background-size: 100% 100%;
      box-shadow: 1px 2px 5px 5px yellowgreen;
      animation: slider 9s infinite linear;


	}
	@keyframes slider {
		0%{ background: url('../image/slide1.jpg');}
		35%{ background: url('../image/slide2.jpg');}
		75%{ background: url('../image/pic3.jpg');}
	}
</style>

3. html image slider with arrows

5 Best HTML Image Slider
5 Best HTML Image Slider
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--5 Best HTML Image Slider-->
</head>
<body>
<h3>HTML CSS IMAGE SLIDER </h3>
<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="../image/slide1.jpg" >
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
   <img src="../image/slide2.jpg" >
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
   <img src="../image/plant.jpg">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  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";
}
</script>

</body>
</html> 
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {
display: none;

}
img {vertical-align: middle;
width: 100%;
height: 300px;
}

h3{
  font-size: 2.1rem;
    text-align: center;
    color:blue;
    line-height: 1.4;
    letter-spacing: 0.5rem;
    margin-top: 10px;
}
/* Slideshow container */
.slideshow-container {
        width: 80%;
       height: 300px;
       position: absolute;
       top: 60%;
       left:50%;
       transform: translate(-50%, -50%);
        background-size: 100% 100%;
      box-shadow: 1px 2px 5px 5px yellowgreen;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.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}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
<!--5 Best HTML Image Slider-->
</style>

4. jQuery Image Slider Plugin

5. HTML CSS CLIENT LOGO SLIDER PLUGIN

HTML CSS CLIENT LOGO SLIDER

Leave a Reply