Automatic Image Slideshow with HTML CSS

Attractive visuals are important to web design because they effectively engage visitors One of these trendy visuals is the automated image slideshow. This website element engages the audience and conveys the message effectively. Today we will create an automatic image slideshow with only HTML and CSS. Below is a step-by-step video tutorial on how to make it. Watch the video tutorial before collecting the source code. If the videos on our channel are of any benefit to you, please subscribe to our channel.

Video Tutorial:

We hope you have watched the video tutorial about HTML CSS Image Slider or Slideshow. An automatic image slideshow is a web design element that presents a series of images or content to the user in a rotating fashion. Many websites use this type of automated image slideshow or slider instead of static images on their homepage, product page, portfolio showcase, landing page, etc. Popular websites and e-commerce sites around the world use this HTML CSS slideshow element to display their features products, or promotions. Also, leading news websites use this element to highlight any important news. There are also corporate websites and online portfolios.

One of the features of automated image slideshows is that they attract attention and convey information efficiently. Also, it can display multiple content within limited screen space. A basic automatic image slideshow can be created with just HTML and CSS. However, JavaScript's role in enhancing interactivity and functionality is undeniable. Here we have tried how to create a functional CSS image slider without using complex JavaScript scripting. Many famous websites use this automatic image slideshow. Some of these are Amazon, Airbnb, CNN, BBC News, eBay, Forbes, Pinterest, Instagram, Adobe, Apple, Walmart, Nike, etc.

You May Also Like:

Automatic Image Slideshow with HTML CSS [ Source Code ]:

To create this HTML CSS automatic image slideshow, you need to create an HTML and a CSS file. Now copy the HTML and CSS code from the code box below. Then paste the code into your files respectively and save them by pressing ctrl+s. Check the code in your browser. If you face any problem with the code below, you can download it from the download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Awesome Image Slider using only html and css</title>    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slide">
        <div class="slideshow">
          <ul>
            <li>
              <div class="single-img">
                <img src="img/a1.png" alt="">
              </div>
            </li>
            <li>
              <div class="single-img">
                <img src="img/a2.png" alt="">
              </div>
            </li>
            <li>
              <div class="single-img">
                <img src="img/a3.png" alt="">
              </div>
            </li>
            <li>
              <div class="single-img">
                <img src="img/a4.png" alt="">
              </div>
            </li>
          </ul>
        </div>
      </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; 
	list-style: none;
}
.slide {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-image: url(img/bg.jpg);
	background-size: cover;
	background-position: center center;
}
.slideshow {
	position: absolute;
	width: 800px;
	margin: auto;
	overflow: hidden;
	box-shadow: 0 20px 20px 5px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
}
.slideshow ul {
	position: relative;
	left: 0;
	width: 9000px;
	transition: left .3s linear;
	animation: slide 15s infinite;
}
.slideshow ul li {
	display: inline-block;
	height: auto;
	float: left;
	width: 800px;
}
.single-img {
	margin: 0 auto;
	padding: 0;
	width: 800px;
}
.single-img img {
	width: 104%;
}
@keyframes slide {
	20% {
		left: 0;
	}
	25% {
		left: -800px;
	}
	45% {
		left: -800px;
	}
	50% {
		left: -1600px;
	}
	70% {
		left: -1600px;
	}
	75% {
		left: -2400px;
	}
	98% {
		left: -2400px;
	}
	100% {
		left: 0;
	}
}

Hope the code snippet is working properly. Automatic Image Slideshow or Slider is a popular choice among web designers and developers for reasons such as mobility, optimized screen space capacity, visual appeal, etc. Hope this snippet will be useful in any of your projects. Click the Load More button on our homepage for more such snippets. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Automatic Image Slideshow with HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Automatic Image Slideshow with HTML CSS

Video Tutorial:

Automatic Image Slideshow with HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form