LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML Codes / HTML-CSS-PHP-JavaScript » Simple And Pure HTML Image Slider Without CSS Or JavaScript

Simple And Pure HTML Image Slider Without CSS Or JavaScript

Simple And Pure HTML Image Slider Without CSS Or JavaScript

Here we have new, simple and stylish HTML image slider widget for blog and website based upon pure HTML code even without <style>, <script> Or $ Codes Or Files to make your web more stylish then it is. As you know that every blogger and f web designer wants a slider to show his main creation in a nice way  and for this he add some cool sliders in that he add his top products and put it at the top of his webpage to be notified first by visitor. For these slider he add some JavaScript and jquires that make his slider awesome but also make his blog load time soo heavy from that his visitor and Google (SEO) both got hurt because nobody have such a huge time as jquery needs.

As alternative CSS3 introduced himself and also got great reputation but as we open any page on IE, it gotta a messed ketchup and your whole site look like it got 9.9 rector-scale earthquake as you know and have seen. Then what should we use? This is the main question that allow me to code this simple slider that anybody can edit with his extra codes. In this code slider will work with JQuery, without JavaScript or even without CSS3. It’s a pure HTML tag and generally known as “MARQUEE Tag”.

Must Read: Marquee: A Best HTML Tag For Moving Your Object.

In this simple but awesome slider we have some hottest features as jqueries or JavaScript version have like it can change your image on your desires specific time and can pause according to your desire on every image. This slider didn’t contain even <style>, <script> or $$code as it have on <marquee>, <div> tag only. It’s quick to load and easy to install with supported by SEO and also like by visitor as it doesn’t require a collection of sec. It can be run over all browser and platform easily and anywhere on the page. You can add unlimited sliders on a single page without conflicting there codes.

Recommended For You:
Add Multiple File Upload HTML Tag In Form Using Pure JavaScript

You have full rights to customized it with any extra codes so just watching our live DEMO, have a look on it’s features list and directly get the code and customized it with your one and make your site awesome for visitor and seo also.

Features:

1.) Simple And Awesome Slider.
2.) Quick To Load And Easy To Install.
3.) Only Image Slide, Can’t Add Text.
4.) All Images Should Be In A Same Size.
5.) 101% Pure HTML Code (Marquee Based).
6.) No <style>, <script> Or $ Code Or File Added.
7.) Time Between Slide Can Easily Be Changed.
8.) Fully Optimized With ALT, Title And Nofollow Tags.
9.) Reloading.
10.) You Can Add Extra CSS, JavaScript Or J-Query Codes.
11.) Cross Browser Support.
12.) Stop On Mouse Over Or Hover.
13.) Cross Platform Compatibility.
14.) Can Be Used Anywhere With Any Code.
15.) Can Be Add Unlimited Time On A Same Page/Post.

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.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <body Code.
7.) Now Copy The Below Code And Paste It Between “<body> </body>“.
8.) Click “Save Template” And Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Create A “New Post” Or “Edit” Some One Existing.
4.) Click “Edit” Tab In The Post Editor.
5.) Now Copy The Below Code And Paste It There
8.) Click “Publish” Or “Update” To Done.

Recommended For You:
How To Reload Your Blog And WebPage Automatically?

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.

<!-- This Is A Copyrighted Code Of EXEIdeas .It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<center>
<div style="width:600px;height:300px;overflow:auto;overflow-y:hidden;white-space:nowrap;border:1px solid black;background:url('https://lh4.googleusercontent.com/-ap-iPV4koOk/UYM6kh5SN5I/AAAAAAAAFmo/lT3WE0GJHQ0/s300/Re-Loading.png') center center no-repeat #000;">
<marquee behavior="scroll" direction="left" scrollamount="600" scrolldelay="2000" onmouseover="this.stop();"onmouseout="this.start();" >
<a href="##########" target="blank" rel="nofollow"><img src="IMAGE-LINK" title="TITLE" alt="ALT" border="0px" width="600px" height="300px"/></a>
<a href="##########" target="blank" rel="nofollow"><img src="IMAGE-LINK" title="TITLE" alt="ALT" border="0px" width="600px" height="300px" style="margin-left:-3px;"/></a>
<a href="##########" target="blank" rel="nofollow"><img src="IMAGE-LINK" title="TITLE" alt="ALT" border="0px" width="600px" height="300px" style="margin-left:-3px;"/></a>
<a href="##########" target="blank" rel="nofollow"><img src="IMAGE-LINK" title="TITLE" alt="ALT" border="0px" width="600px" height="300px" style="margin-left:-3px;"/></a>
<a href="##########" target="blank" rel="nofollow"><img src="IMAGE-LINK" title="TITLE" alt="ALT" border="0px" width="600px" height="300px" style="margin-left:-3px;"/></a>
</marquee>
</div>
</center>
<!-- This Is A Copyrighted Code Of EXEIdeas .It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->

Customization:

1.) Change All Blue Text With Your Desired Links And Images.
2.) Change All Pink Text With Your Alt & Title Tags.
3.) Change All Red Numbers With Your Images Width.
4.) Change All Light Blue Numbers With Your Image Heights.
5.) Save And Done.

Recommended For You:
Input: A Best Tag For One Line Text Adding On WebPage.

You Like It, Please Share This Recipe With Your Friends Using...

17 Responses to “Simple And Pure HTML Image Slider Without CSS Or JavaScript”

  1. Thanks for sharing this great Post dude
    Social Media Marketing Bangalore

  2. prince moga says:

    awesme post bro great

  3. BBL says:

    Very amazing I will add in my blog thanks for this share

  4. phd dissertation writing service says:

    Great work Hassan ! your coding is very useful thanks for sharing keep up your good work doing

  5. Utkarsh Singh says:

    I like your popular post widget, can you please provide code of that Popular Post widget. Its very good. Please , thnx in advance.

  6. Sahar Jabeen says:

    Thanks for sharing this post with us…it was really helped me out to create slider in my website…

  7. Joe Martha says:

    How do I get rid of the reloading at the beginning of a slideshow?

Leave a Reply to Utkarsh Singh Cancel reply

Your email address will not be published. Required fields are marked *