Hi Friends, Today i will tell you how to create pure html css slider without javascript or jquery. When we are searching the slider on the internet generally we found only slider which include javascript or jquery. Everybody knows this language slow down our website. To overcome the problem you have to use only html and css to create a slider.
See the Live Demo and download the code below:
For More information about Website Design you can click below:
Pure CSS Button With Lightening Glowing and Shining Effect
Create Expand Collapse Sliding Menu Using jQuery
Background Color Change Automatically Using Jquery
How to add smart slider Facebook Like Box Pop-up
Learn Ajax For Beginners In Hindi
33 New Awesome Features in CSS3 and CSS4
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners
For Creating pure html css slider you have to follow some steps. These steps are
Step1: Open your webpage in any code editor.
Step2: Paste the below code for creating a simple slider.
HTML Code: In the below code you can change the images as per your wishes. In the body max-width style, you can decide the width of your slider.
<body style="max-width:940px;"> <h1>Pure HTML CSS Slider Without JavaScript or Jquery</h1> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> <div class="carousel-item"> <img src="http://i0.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Stop-Double-Form-Submission-Using-Jquery-and-Ajax.jpg?w=940"> </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Find-and-Remove-Duplicate-Data-From-MYSql-table.jpg?w=940"> </div> <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <img src="http://i2.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Avoid-Spammers-With-Motion-CAPTCHA-Using-JQuery.jpg?w=940"> </div> <label for="carousel-3" class="carousel-control prev control-1">‹</label> <label for="carousel-2" class="carousel-control next control-1">›</label> <label for="carousel-1" class="carousel-control prev control-2">‹</label> <label for="carousel-3" class="carousel-control next control-2">›</label> <label for="carousel-2" class="carousel-control prev control-3">‹</label> <label for="carousel-1" class="carousel-control next control-3">›</label> <ol class="carousel-indicators"> <li> <label for="carousel-1" class="carousel-bullet">•</label> </li> <li> <label for="carousel-2" class="carousel-bullet">•</label> </li> <li> <label for="carousel-3" class="carousel-bullet">•</label> </li> </ol> </div> </div> </body> |
<body style="max-width:940px;"> <h1>Pure HTML CSS Slider Without JavaScript or Jquery</h1> <div class="carousel"> <div class="carousel-inner"> <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> <div class="carousel-item"> <img src="http://i0.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Stop-Double-Form-Submission-Using-Jquery-and-Ajax.jpg?w=940"> </div> <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Find-and-Remove-Duplicate-Data-From-MYSql-table.jpg?w=940"> </div> <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> <div class="carousel-item"> <img src="http://i2.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Avoid-Spammers-With-Motion-CAPTCHA-Using-JQuery.jpg?w=940"> </div> <label for="carousel-3" class="carousel-control prev control-1">‹</label> <label for="carousel-2" class="carousel-control next control-1">›</label> <label for="carousel-1" class="carousel-control prev control-2">‹</label> <label for="carousel-3" class="carousel-control next control-2">›</label> <label for="carousel-2" class="carousel-control prev control-3">‹</label> <label for="carousel-1" class="carousel-control next control-3">›</label> <ol class="carousel-indicators"> <li> <label for="carousel-1" class="carousel-bullet">•</label> </li> <li> <label for="carousel-2" class="carousel-bullet">•</label> </li> <li> <label for="carousel-3" class="carousel-bullet">•</label> </li> </ol> </div> </div> </body>
CSS3 Code: The below code helps you to give the functionality to your slider.
html, body { margin: 0px auto; padding: 0px; background: #fecd76; } .carousel { position: relative; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64); margin-top: 26px; } .carousel-inner { position: relative; overflow: hidden; width: 100%; } .carousel-open:checked + .carousel-item { position: static; opacity: 100; } .carousel-item { position: absolute; opacity: 0; -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } .carousel-item img { display: block; height: auto; max-width: 100%; } .carousel-control { background: rgba(0, 0, 0, 0.28); border-radius: 50%; color: #fff; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; } .carousel-control.prev { left: 2%; } .carousel-control.next { right: 2%; } .carousel-control:hover { background: rgba(0, 0, 0, 0.8); color: #aaaaaa; } #carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3 { display: block; } .carousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10; } .carousel-indicators li { display: inline-block; margin: 0 5px; } .carousel-bullet { color: #fff; cursor: pointer; display: block; font-size: 35px; } .carousel-bullet:hover { color: #aaaaaa; } #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { color: #ff0000; } h1, a {text-align: center; text-decoration:none; color:#3399FF; font-weight: bold;} |
html, body { margin: 0px auto; padding: 0px; background: #fecd76; }.carousel { position: relative; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64); margin-top: 26px; }.carousel-inner { position: relative; overflow: hidden; width: 100%; }.carousel-open:checked + .carousel-item { position: static; opacity: 100; }.carousel-item { position: absolute; opacity: 0; -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; }.carousel-item img { display: block; height: auto; max-width: 100%; }.carousel-control { background: rgba(0, 0, 0, 0.28); border-radius: 50%; color: #fff; cursor: pointer; display: none; font-size: 40px; height: 40px; line-height: 35px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); cursor: pointer; -ms-transform: translate(0, -50%); transform: translate(0, -50%); text-align: center; width: 40px; z-index: 10; }.carousel-control.prev { left: 2%; }.carousel-control.next { right: 2%; }.carousel-control:hover { background: rgba(0, 0, 0, 0.8); color: #aaaaaa; }#carousel-1:checked ~ .control-1, #carousel-2:checked ~ .control-2, #carousel-3:checked ~ .control-3 { display: block; }.carousel-indicators { list-style: none; margin: 0; padding: 0; position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; z-index: 10; }.carousel-indicators li { display: inline-block; margin: 0 5px; }.carousel-bullet { color: #fff; cursor: pointer; display: block; font-size: 35px; }.carousel-bullet:hover { color: #aaaaaa; }#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { color: #ff0000; }h1, a {text-align: center; text-decoration:none; color:#3399FF; font-weight: bold;}
Step3: After pasting and saving the code you can check your webpage in any modern browser.
For any problem you see the live demo and download the code from below.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design
Leave a Reply