Automatic image slider HTML Code

A slide show is a presentation of fixed images (slides) on a projection screen or electronic display device, usually in a prearranged sequence. Changes can be automatic and at regular intervals, or they can be manually controlled by the provider or viewer. Slide shows originally consisted of a series of individual photo slides projected onto a screen with a slide projector. When referring to video or computer-based visual equivalents in which the slides are not individual physical objects, the term is often written as one word, slideshow.

A slide show is a presentation of images for their own visual interest or artistic value, sometimes unaccompanied by explanation or text, or it may be used to clarify or reinforce information, ideas, concepts, solutions or suggestions presented verbally. Slide shows are sometimes conducted by a presenter using equipment such as a carousel slide projector or overhead projector, but it is now common to use electronic video display equipment and computer-based presentation software.

Copy the Code and paste on your post page.

Note: Change every image link 1 to 5 (example)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbsOh_LuUrEroO3380lPSPyasRfe7Hpbg7hN7vcoN-_4R6Hxh719P7_nZlDIPVHXzfiiW2se8Hf46Ia-KIohI7RditWzX47xxhFx9OTzxp1yPvyZNj_XXxmZwu4T65ie8fehaBHyu5g3EjpnoqRjtFfyR4OYuS9a_LdBB_XhK7tGaEo61wIv08qWc/s3886/pexels-ray-bilcliff-4696588.jpg

<!--Slid show code start--><br />  <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br /><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/><br />  <style><br /> body {<br />  margin: 10%;<br />   margin-left:20%;<br />}<br /><br />#slider {<br />  position: relative;<br />  width: 500px;<br />  height: 265px;<br /> <br />  overflow: hidden;<br />  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);<br />}<br />#slider ul {<br />  position: relative;<br />  list-style: none;<br />  height: 100%;<br />  width: 10000%;<br />  padding: 0;<br />  margin: 0;<br />  transition: all 750ms ease;<br />  left: 0;<br />}<br />#slider ul li {<br />  position: relative;<br />  height: 100%;<br /> <br />  float: left;<br />}<br />#slider ul li img{<br />  width: 500px;<br />  height: 265px;<br />}<br /> <br />#slider #prev, #slider #next {<br />  width: 50px;<br />  line-height: 50px;<br />  border-radius: 50%;<br />  font-size: 2rem;<br />  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);<br />  text-align: center;<br />  color: white;<br />  text-decoration: none;<br />  position: absolute;<br />  top: 50%;<br />  transform: translateY(-50%);<br />  transition: all 150ms ease;<br />}<br />#slider #prev:hover, #slider #next:hover {<br />  background-color: rgba(0, 0, 0, 0.5);<br />  text-shadow: 0;<br />}<br />#slider #prev {<br />  left: 0px;<br />}<br />#slider #next {<br />  right: 0px;<br />}<br />  </style><br /><br /><body><br />  <div id="slider"><br />    <ul id="slideWrap"> <br />      <li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbsOh_LuUrEroO3380lPSPyasRfe7Hpbg7hN7vcoN-_4R6Hxh719P7_nZlDIPVHXzfiiW2se8Hf46Ia-KIohI7RditWzX47xxhFx9OTzxp1yPvyZNj_XXxmZwu4T65ie8fehaBHyu5g3EjpnoqRjtFfyR4OYuS9a_LdBB_XhK7tGaEo61wIv08qWc/s3886/pexels-ray-bilcliff-4696588.jpg" /></li><br />      <li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4Uxk3M_QiVauWjVnW-QbS2CF6jdar_mlU3gjOhqSg9zGRhbnXmyMcsXLTfLUEKnKAAYSOOAszF9027trkIRB2ikTU_Q-BXjfxlpL66inBLSIBbEGV05bpaUDF80SeZS-sJKmpQQ79MM-hdFe2qm8XhGBPfDfwtPga6DQ4SFWmY_eZnhmuyJtI2Xl/s3886/pexels-pixabay-255435.jpg" /></li><br />      <li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJz0IR504Y7tbsOk4n7RkzyUv7wXYl6BJyRIz4HFib7LRW5mk-qTPaSaecjHEXlxQ0UYpzUHUrr9jIvnYEDbx_pAdxeUCDDlJNrXaqKlqbmjB31iJbbcxEHKnP-50pBEAaKn7Jvkj3x2j32T7MkbqJu1PHtLn1qNdmtxcNR8Jp_H_sXOpJUGYTK5g/s3279/pexels-erik-karits-11117920.jpg" /></li><br />      <li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Kqnca7tpqMuy6B9KPDywCWZzihDwZEJOuFMJr5oGgFxkgJYwwlIQ_iYFux4fonYXnhaVfmtn6UQTh5m8k58jK5t9qWEIS7TlIN5fn3VMiEUObK1ilgjLIoxR445IN7P0DUQij4pGapc4MttejLxRvNCdhl3fbFfjBfrbXwbdd525CilGwkapZjke/s3119/pexels-andrew-mckie-3177389.jpg" /></li><br />      <li><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NjE16RB6nVJW7-R_NiLBXgeYTAzeq9PZjUT9hXGDnLFJ-uAGf97InGwS54pZQsc7VuDV_p_Ir3yu2TqKJ2fRawnrHCg7Mw97f_z_MiJpUlgZQB7eDl-3d8o9KuedMEYUDJQztBocjQnHcUTFWY5Pod9A7Ou5PvIEhJ5uNEcwKx6R5uVq0Q7XQfvz/s320/pexels-aaron-j-hill-7944594%20(1).jpg" /></li><br />    </ul><br />    <a href="#" id="prev">≪</a><br />    <a href="#" id="next">≫</a><br />  </div><br /><br /><br />  <script><br />    var responsiveSlider = function() {<br /><br />var slider = document.getElementById("slider");<br />var sliderWidth = slider.offsetWidth;<br />var slideList = document.getElementById("slideWrap");<br />var count = 1;<br />var items = slideList.querySelectorAll("li").length;<br />var prev = document.getElementById("prev");<br />var next = document.getElementById("next");<br /><br />window.addEventListener('resize', function() {<br />  sliderWidth = slider.offsetWidth;<br />});<br /><br />var prevSlide = function() {<br />  if(count > 1) {<br />    count = count - 2;<br />    slideList.style.left = "-" + count * sliderWidth + "px";<br />    count++;<br />  }<br />  else if(count = 1) {<br />    count = items - 1;<br />    slideList.style.left = "-" + count * sliderWidth + "px";<br />    count++;<br />  }<br />};<br /><br />var nextSlide = function() {<br />  if(count < items) {<br />    slideList.style.left = "-" + count * sliderWidth + "px";<br />    count++;<br />  }<br />  else if(count = items) {<br />    slideList.style.left = "0px";<br />    count = 1;<br />  }<br />};<br /><br />next.addEventListener("click", function() {<br />  nextSlide();<br />});<br /><br />prev.addEventListener("click", function() {<br />  prevSlide();<br />});<br /><br />setInterval(function() {<br />  nextSlide()<br />}, 5000);<br /><br />};<br /><br />window.onload = function() {<br />responsiveSlider();  <br />}<br />  </script><br /></body><br /><br /><!--Slid show code end-->

VSVP Tech

Automatic image slider HTML Code

About the Author

Post a Comment

All FM Radios in One Place

HTML Tables Script

FM Radios

Voice to Text Converter

YouTube Channel Statistics Tracker

VSVP Tech