Hii,
 In this blog, I am going to  share an example in which i have created a pure CSS Slider using few CSS properties like transitions, transforms,input:checked functionality and animations.

 Slider is the most commonly used feature to display images, to create step by step tutorials, to demonstrate sliding presentations on web, For both web as well as mobile application.
Slider created using Pure CSS can be very useful as it is very light weighted,easy to implement. 

If you are asked to create a Slider, you will prefer to use some scripting language like javascript or jquery too.

No doubt you can create it using any scripting language but if you want to learn how to create it using simple CSS properties then go though the example below.

advertisement banner-slide created using CSS

CSS:

.slide,.slides{width:300px;height:250px}
.nav label,.nav-dots .nav-dot{background-color:rgba(255,255,255,.5)}
.slides{padding:0!important;display:block;margin:0 auto!important;position:relative;overflow:hidden}
.slides .nav label,.slides .nav-dots,.slides .slide{position:absolute!important}
.slides .nav-dots{list-style-type:none;}
.slides input{display:none}
.slide,.slide-container{display:block;}
.slides .nav{position:absolute;bottom:0;width:300px;}
.slide img{width:100%;height:100%;}
.slides .nav label{width:80px;height:25px;display:none;z-index:9;cursor:pointer;color:#FFF;
font-size:16px;text-align:center;bottom:0;line-height:25px;}
.slides .nav label.next{right:0}
.slides .nav-dots{width:100%;bottom:9px;height:9px;text-align:center}
.slides .nav-dots .nav-dot{top:-5px;width:8px;height:8px;margin:0 4px;position:relative;border-radius:100%;display:inline-block}
.slides .nav-dots .nav-dot:hover{cursor:pointer;background-color:rgba(255,255,255,.8)}
.fa{margin-top:5px;}
/*imp for slide*/
.slides input:checked+.slide-container  label{display:block;}
.slide{top:0;opacity:0;transform:translateX(300px);transition:all .7s ease-in-out;}
.slides input:checked+.slide-container .slide{opacity:1;transform:scale(1);transition:opacity 1s ease-in-out}
.slides input#img-1:checked~.nav-dots label#img-dot-1,input#img-2:checked~.nav-dots label#img-dot-2,
input#img-3:checked~.nav-dots label#img-dot-3,input#img-4:checked~.nav-dots label#img-dot-4,
input#img-5:checked~.nav-dots label#img-dot-5,input#img-6:checked~.nav-dots label#img-dot-6{background:rgba(255,255,255,1)}

HTML:

<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked>
	<li class="slide-container">
		<div class="slide">
			<img src="img/banner_1.jpg"  width="300" height="250" />
		</div>
		<div class="nav">
			<label for="img-6" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-2" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
	</li>
	<input type="radio" name="radio-btn" id="img-2">
    <li class="slide-container">
        <div class="slide">
          <img src="img/banner_1a.jpg"s width="300" height="250" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-3" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
    </li>
    <input type="radio" name="radio-btn" id="img-3">
    <li class="slide-container">
        <div class="slide">
          			<img src="img/banner_2.jpg"  width="300" height="250" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-4" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
    </li>
    <input type="radio" name="radio-btn" id="img-4">
    <li class="slide-container">
        <div class="slide">
          			<img src="img/banner_2a.jpg" width="300" height="250" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-5" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
    </li>
    <input type="radio" name="radio-btn" id="img-5">
    <li class="slide-container">
        <div class="slide">
          			<img src="img/banner_3.jpg"  width="300" height="250" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-6" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
    </li>
    <input type="radio" name="radio-btn" id="img-6">
    <li class="slide-container">
        <div class="slide">
          			<img src="img/banner_3a.jpg" width="300" height="250" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev"><i class="fa fa-chevron-left"></i></label>
			<label for="img-1" class="next"><i class="fa fa-chevron-right"></i></label>
		</div>
    </li>
    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>