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 SlideShow With Play/Pause Controls

Simple And Pure HTML SlideShow With Play/Pause Controls

Simple And Pure HTML SlideShow With Play/Pause Controls

After our laste article about Simple And Pure HTML Image Slider Without CSS Or JavaScript Here we have new, simple and stylish HTML image slideshow with Play/Pause controls 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.

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 Slides 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 Slides Can Easily Be Changed.
8.) Fully Optimized With ALT, Title And Nofollow Tags.
9.) Reloading Info Also Display.
10.) You Can Add Extra CSS, JavaScript Or J-Query Codes.
11.) Cross Browser Support.
12.) Pause And Play With Buttons.
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.

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.

<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"  id="mymarquee" >
<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>
<input onclick="document.getElementById('mymarquee').stop();" type="button" value="||" title="Pause"/>
<input onclick="document.getElementById('mymarquee').start();" type="button" value=">" title="Play"/>
</center>

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.

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

6 Responses to “Simple And Pure HTML SlideShow With Play/Pause Controls”

  1. Anonymous says:

    speed very fast any way to reduce down ?

  2. Anonymous says:

    love it

  3. I don’t know what I’m supposed to do here:

    a href=”##########” ta–et=”blank” rel=”nofollow”

    Where is that supposed to go to?

Leave a Reply

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