Pure CSS Slideshow Autoplay without Javascript

Pure CSS Slideshow Autoplay without Javascript

After getting a lot of feedback, Today I have the plan to share you pure CSS slideshow autoplay without Javascript. It comes with dot navigation support.

Furthermore, it also supports the title and description text over each slider image.  You can easily customize the heading text by editing the CSS.

Another great functionality of this slider, it supports the autoplay function. That means it allows you to set whether slider slides the images automatically or not.

Every CSS only image slider have its own way of build and functionality. This slider doesn’t support thumbnail functionality but you can check out our CSS thumbnail image slider which also builds with CSS.

But It is the fully responsive carousel and supports a wide range of browsers including IE. It has multiple animation options to allow to slide the slider in a different way.

You can easily choose the version that you like. You just need to call a separate CSS file, and the HTML file is the same except the light version. The lighter version doesn’t have legend or bullets.

This slider created by Elitewares and he has done a great job. It makes the slider without touching javascript and provides all possible function which has any simple jquery slider.

The slider includes the effects left to right, a right to left, top to bottom and bottom to top. It also allows adding overlay text with animation.

The important and significant thing about this slider, it is autoplay with bullets. It means that when the slide changes the image, it will replace the status bullet automatically.

Build Auto Slideshow HTML Structure

I am not going to explain you whole process but few necessary things. You will get the complete source code and demo at below. Ok now let’s have a look at the HTML.

Before I go ahead, I want to mention that the HTML bit complicated as compared to other sliders. It requires to add a few extra divs, but this is maybe because of its excellent functionality.

The slider HTML start with the main ID slider and next, it has a child div class name slides which holds each slide.

<div id="slider">
  <div class="slides">
	........	
  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

The switch dots are placed just right below the child div slides and define with an unordered list. Each LI represent on the dot.

Next, each slider id defines with a class name slider and we need to place just under the,slides Just like below example.

<div id="slider">
  <div class="slides">
	
    <div class="slider">
      <div class="legend"></div>
      <div class="content">
        <div class="content-txt">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        </div>
      </div>
      <div class="image">
        <img src="https://img11.hostingpics.net/pics/767361311.jpg">
      </div>
    </div>

  </div>
  <div class="switch">
    <ul>
      <li>
        <div class="on"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Now you can see the slider div has some child divs and HTML content etc. You can also see the div class name image which holds the image. That’s how you need to place the content, HTML, link or anything which you would like to add.

Apply the Slider Styling

The slider ID is work by setting the width and height. It also requires position relative and overflows hidden.

#slider{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}

Similar, slides class need the width and height with position relative. It also needs to add slide animation which will create using @keyframe CSS property.

.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}

Each slide formula used similar to many other CSS-based sliders, and it divided the width from number sliders. Like if they have total four sliders then it’s formula will look like 100%/4 = 25%.

.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}

To make it responsive, need to set width and height to 100% for slider image and image div.

.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}

This is initially CSS require a slider to make it work but to make it look perfect and work with its function, just refer to the above demo.

Code ExamplesYou May Also Like