Hello, Guy’s…!!! After Many Heavy Sliders, I Am Here To Share A New CSS Slider That Is Even Not CSS-3, It Also Did Not Contain JavaScript Or jQuery That Will Make Your Page Heavy To Load And You Visitor Get Diverge. It Is An Awesome And Simple HTML-CSS Manual Slider With Text, Image, Video, Frame etc For Blog And Website To Spice Them Up With Saving Loading Time.
In This Slider, The Image Will Not Slide But Will Be Change Frequently As It Did Not Have J-Query File That Will Make It Heaby, It Is Based Upon #div Code Of HTML, All Images Of Slider Will Be Loaded On First Web-{age Load But One Will Be Only Shown, When You Click On The Other Link (Navigation), The Other Image DIV Will Be Place On The First Image DIV From This The Previous Will Be Hidden Behind Second One.
It Has Short And Easy Understandable Code That Every Newbie Can Also Read This. It Actually Contain DIVs That Means You Can Add Anything To It And It Will Be Fine And Nice. Without Any More Preface Move Forward To The Code Going Through The Awesome Features List And Don’t Forget To View The Live DEMo Before Using It On Your Blog/Site.
Table of Contents
Features:
1.) Awesome, Simple And Stylish DIV Changer (Slider).
2.) No jQuery Or JavaScript Codes.
3.) Pure HTML And CSS Code Not Even CSS-3.
4.) Cross Browser Available, Works Over IE6+ Browsers With All Version Of Chrome, Firefox, Safari Or Opera And etc.
5.) You Can Add Images Or Text Or Even Both Too.
6.) Short Code To Quick Load.
7.) Based On DIV Can Contain AnyThing Like Frame, Video, Image, Text Or Else.
8.) No Extra Effect.
9.) No Loading Time Between DIV Changing.
10.) Fully Customizable With Unlimited Slides.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style>
* {margin: 0;padding: 0;}
#content-slider {width: 650px;overflow: hidden;height: 300px;margin: 30px 0 0 0;border: solid 1px #666;}
#content-slider-inside {list-style: none;height: 320px;overflow: scroll;overflow-y: hidden;}
#content-slider-inside li {width: 650px;background: #ccc;height: 300px;color: #666;font-size: 200px;font-family: "Times New Roman", Times, serif;font-style: italic;text-align: center;line-height: 300px;}
#navigation {list-style: none;margin: 20px 0 0 0;float: right;}
#navigation li {float: left;width: 30px;height: 30px;text-align: center;margin: 0;border: solid 1px #ccc;line-height: 30px;font-family: Arial, Helvetica, sans-serif;margin: 0 0 0 5px;}
#navigation li a, #navigation li a:link, #navigation li a:visited {text-decoration: none;display: block;height: 30px;color: #666;}
#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {background: #666;color: #fff;}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background: #666;color: #fff;}
</style>
<div style="width: 650px; margin: 0 auto 0 auto;">
<div id="content-slider">
<ul id="content-slider-inside">
<li id="one"><img src="https://www.njsexecutive.com/wp-content/uploads/2010/10/Mercedes-S-Class-650-x-300.png" alt="Slider One" height="300" width="650"/></li>
<li id="two"><img src="https://entertainmentzz.com/wp-content/uploads/2012/11/2013-honda-accord-phev-155--650x300.jpg" alt="Slider Two" height="300" width="650"/></li>
<li id="three"><img src="https://www.gamechy.com/wp-content/uploads/gamepics/image/thumbs/650x300-gran-turismo-4.jpg" alt="Slider Three" height="300" width="650"/></li>
<li id="four"><img src="https://periodismodelmotor.com/wp-content/uploads/cache/650x300-ferrari-458-italia-.jpg" alt="Slider Four" height="300" width="650"/></li>
<li id="five"><img src="https://periodismodelmotor.com/wp-content/uploads/cache/650x300-Peugeot-4008.jpg" alt="Slider Five" height="300" width="650"/></li>
</ul>
</div>
<ul id="navigation">
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
<li><a href="#three">3</a></li>
<li><a href="#four">4</a></li>
<li><a href="#five">5</a></li>
</ul>
</div>
Customization:
1.) Just Change Black Bold And Underline Your With Your Desired One Like Fr54ame, Video, Image, Text etc.
2.) Change Black Bold Number Also If You Want To Change It
3.) You Can Add Unlimited No Of Slides.
4.) Save And Done.
put to my web
Thanks For Visiting Us…
Nice slider man,,keep it up..
Regards:
bloggerheroe.com
You Are Welcome Here, Be With Us To Get More…
please can you tell me how to add links to this slideshow and make it auto……….please help..
Yes, It’s A Simple DIV, You Can Add Any Dat That You Can Add In Any DIv, Add Link In Simple Style Like <a href…
Hi,
Nice information you have shared. Thanks for sharing this information and it really gave a nice knowledge to me …. Keep blogging will follow you….
You Are Welcome To Visit Us And Thanks For Liking Us…
Your Blog’s Information is really useful, After read your blog I know this.I like this.
Keep up the great work, I’ve bookmarked for future reference.
You Are Welcome To Visit Us And Be-With Us…
Also Thanks For Liking Our Article…
Nice info, i like youre blog, so nice, and have good trafic alexa, great job
Thanks For Liking Our Blog And Appreciating Our Work…