How to Create Slideshow With HTML and CSS Only?

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Slideshow Using HTML and CSS Only. It takes less browser memory and less computation power there is no JavaScript involved. For Create Slideshow we’ll use HTML and CSS Only with the help of the Carousel CSS element.

What is a Slide Show?

The slide show is a group of images and that image changes automatically with animation. we can create slide shows when we start using smartphones and when we only create a slideshow and add music so let’s create with coding.;

Selecting a topic and an objective for your slide presentation is the first step. What ideas or facts do you wish to convey? What should they know about your audience? You can choose the subject matter and organizational layout of your slide show by responding to these questions.

50+ HTML, CSS & JavaScript Projects With Source Code

Before That, We Could See How The Project will be.

The Project consists of four slides with contents for each slide and separate background colors for each slide. Then it starts the slideshow, the contents will be changed with background colors and the last slide again go to the default first slide. Here we have used delay time o show the slide for a few minutes. SOUND INTERESTING?

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Then, Let’s Begin Our Project Journey By Adding The Source Codes. For That, We Are Using The Html Code First.

HTML Code For Slideshow

<div id="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><h1 class="slide-number">1</h1></div>
    <div class="slide"><h1 class="slide-number">2</h1></div>
    <div class="slide"><h1 class="slide-number">3</h1></div>
    <div class="slide"><h1 class="slide-number">4</h1></div>
    <div class="slide"><h1 class="slide-number">5</h1></div>
  </div>
</div>

<h1>Just a simple slideshow. CSS only, no JS</h1>

Here First We are adding the div tag for the slideshow to occur Then inside of the div tag we just add our contents with header class (H1) along with separate names for every content. Then we are closing our div tags.

Portfolio Website using HTML and CSS (Source Code)

HTML Output:

Weather App Using Html,Css And JavaScript 

We may customize it with different CSS values to produce a difference in the slides that would be helpful during a slideshow using separate div tags and a header class. We are making use of these different class names for that.

So that’s it for HTML; now we can use CSS to add the stylistic properties and slideshow.

CSS Code For Slideshow

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}

Now the CSS code is added successfully. In this code, The First thing we do is start styling with the body section by adding font family, aligning text to the center, and fixing margin and padding.

Gym Website Using HTML and CSS With Source Code

The Second thing is we started adding backgrounds and font sizes to the slides and mainly fixing the slide to be hidden for avoiding the collapsing of slides during the transition.

Next, the margin values were added and fixed the animation transitioned to 18 s for displaying the slides properly then the width and height for the slide during and after transition were fixed. The code for explanation is given below.

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

After this, We started fixing the background colors to change for each slide during the slideshow using the CSS Nth child property. Inside the nth child, we might add numbers up to the slides we want to display.

Then our slide show will start with each element and for that purpose, we are using the animation properties. and Inside it we are assuming the values of the margin-left so the slide moves towards the left from the given set of values.

Animated Login Form Using HTML and CSS (Source Code)

The code for the explanation is given.

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}

Now the CSS code is completed. But here We wanna see our project preview for that we can use the output section given below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Final Ooutput Of Slideshow Using Html & Css Only

Video Output:

That’s all , Now We have successfully created our Slide Show Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

Create Login and SignUp Page In HTML & CSS (Source Code)

If you find out this Blog helpful? , Then make sure to search code with random on google for Front End Projects With Source codes and make sure to Follow the Code With Random Instagram page.

Thank You For Visiting!!

REFER CODE – Days Ahead

WRITTEN BY – Ragunathan S