Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create a slide using pure CSS

    • 1
    • 1
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 184
    Comment on it

    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>

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: