Create Slideshow Using Only HTML And CSS (Source Code)

Create Slideshow Using Only HTML And CSS (Source Code)

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Slideshow Using HTML and CSS. 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?

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

 

HTML CODE For Slide Show 

<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 adding our contents with header class (H1) along with separate names for every content. Then we are closing our div tags.

Text Gradient Using HTML And CSS Code Only

With separate div tags and header class, We can style it with various CSS properties to make a difference in the slides that will be useful during a slideshow. For that, we are using these separate class names.

So, That’s for HTML, Now we can add the styling properties and slideshow using the CSS.

CSS CODE For Slide Show

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.

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.

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+ Front-end Projects for Web developers (Source Code)

FINAL OUTPUT Of Slide Show


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.

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.

REFER CODE – Days Ahead

WRITTEN BY – Ragunathan S

Share on:

Leave a Comment