ADVERTISEMENT

Create Slideshow Using HTML And CSS Only

Telegram Group Join Now

ADVERTISEMENT

 Create Slideshow Using HTML And CSS With (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. It takes less browser memory and less computation power there is no JavaScript involved. For Create Slideshow we’ll using HTML and CSS Only with the help of Carousel CSS element.

ADVERTISEMENT

ADVERTISEMENT

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?

ADVERTISEMENT

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

ADVERTISEMENT

 

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

The code for the explanation is given.

ADVERTISEMENT

.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;}
}

 

ADVERTISEMENT

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

ADVERTISEMENT

100+ Front-end Projects for Web developers (Source Code)

ADVERTISEMENT

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.

Thank You For Visiting!!

REFER CODE – Days Ahead

WRITTEN BY – Ragunathan S

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT