Simple JavaScript Text + Image Slider For Blog And Website

This Article Was Live On June 8th, 2012 And So Far Have: 4 Comments...
Last Updated on June 21st, 2014

As we have seen many of awesome and stylish sliders that are really coll while working but they have a lengthy code with heavy JQuery that often disturb your template and also increase your blog and website loading time so high so that visitor ger anger and leave your site or blog. Here I am not telling you to banned the use of slider but it is now important to show your hot post or article to your visitor with saving your space. Here I am telling you to use simple coded and easy sliders that can be customizable according to your template or are not heavy to increases your loading time. I see that many slider contain HTML, CSS, JavaScript And HTMl. As you know that the heaviest language code is JQuery so here is my slider in which Only JavaScript is available with short CSS as you want. It Did Not contain even HTML so you can imaging that how simple is this but first have a look on slider screenshot before proceeding. It didn’t contain as function as other heavy slider contains but it is unique.
The original code is provided by Dynamic Drive i just updated this with some extra code and your slider is ready to rock.

CLICK HERE TO SEE DEMO

Features:
1.) You Can Add Unlimited Slides.
2.) There Are Text And Image In Every Slide.
3.) Easy To Install And Quick To Load.
4.)No JQuery Or HTML, Only CSS And JavaScript.
5.) Full Easy Customizable CSS And JavaScript.
6.) Smooth Fade Out Effect.
7.) ReadMore Button In Slides.
8.) Slide Title Space Available.
9.) (500px X 250px) Dimension Is Default, You Can Also Change It.

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.

Recommended For You:

How To Send Email With SMTP And Attachment Using phpmailer in PHP?

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.

exesliderheading {font-size: 20px; font-style: oblique;}

.exepic {

float:left;

margin:0 20px 0 0;

padding:5px;

}

.exelink {

float:right;

}

</style>

/***********************************************

* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

* Upgraded By Muhammad Hassan © EXEIdeas International. Visit https://www.exeideas.com/ for full source code

***********************************************/

var delay = 2500; //set delay between message change (in miliseconds)

var maxsteps=30; // number of steps to take to change from start color to endcolor

var stepdelay=50; // time in miliseconds of a single step

//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect

var startcolor= new Array(255,255,255); // start color (red, green, blue)

var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();

begintag='<div style=”font: normal; padding: 5px; background-color: #efefef;”>’; //set opening tag, such as font declarations

fcontent[0]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 1 Heading:</exesliderheading></br>Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[1]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 2 Heading:</exesliderheading></br>Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[2]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 3 Heading:</exesliderheading></br>Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[3]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 4 Heading:</exesliderheading></br>Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[4]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 5 Heading:</exesliderheading></br>Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’

closetag='</div>’;

var fwidth=’500px’; //set scroller width

var fheight=’250px’; //set scroller height

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////

var ie4=document.all&&!document.getElementById;

var DOM2=document.getElementById;

var faderdelay=0;

var index=0;

/*Rafael Raposo edited function*/

//function to change content

function changecontent(){

if (index>=fcontent.length)

index=0

if (DOM2){

document.getElementById(“fscroller”).style.color=”rgb(“+startcolor[0]+”, “+startcolor[1]+”, “+startcolor[2]+”)”

document.getElementById(“fscroller”).innerHTML=begintag+fcontent[index]+closetag

if (fadelinks)

linkcolorchange(1);

colorfade(1, 15);

}

else if (ie4)

document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;

index++

}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////

// Modified by Dynamicdrive.com

function linkcolorchange(step){

var obj=document.getElementById(“fscroller”).getElementsByTagName(“A”);

if (obj.length>0){

for (i=0;i<obj.length;i++)

obj[i].style.color=getstepcolor(step);

}

/*Rafael Raposo edited function*/

var fadecounter;

function colorfade(step) {

if(step<=maxsteps) {

document.getElementById(“fscroller”).style.color=getstepcolor(step);

if (fadelinks)

linkcolorchange(step);

step++;

fadecounter=setTimeout(“colorfade(“+step+”)”,stepdelay);

}else{

clearTimeout(fadecounter);

document.getElementById(“fscroller”).style.color=”rgb(“+endcolor[0]+”, “+endcolor[1]+”, “+endcolor[2]+”)”;

setTimeout(“changecontent()”, delay);

}

/*Rafael Raposo’s new function*/

function getstepcolor(step) {

var diff

var newcolor=new Array(3);

for(var i=0;i<3;i++) {

diff = (startcolor[i]-endcolor[i]);

if(diff > 0) {

newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);

} else {

newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);

}

return (“rgb(” + newcolor[0] + “, ” + newcolor[1] + “, ” + newcolor[2] + “)”);

}

if (ie4||DOM2)

document.write(‘<div id=”fscroller” style=”width:’+fwidth+’;height:’+fheight+'”></div>’);

if (window.addEventListener)

window.addEventListener(“load”, changecontent, false)

else if (window.attachEvent)

window.attachEvent(“onload”, changecontent)

else if (document.getElementById)

window.onload=changecontent

</script>

</div>

Customization:
1.) Change Blue Text With Your URLs.
2.) Change Pink Color With Your Slide Title.
3.) Change Red Color With Your Desire Text.
4.) If You Want To Change Size, Dimension, Pixel, Fonts, Image Pixel, Text Dimension And Position Or Anything, Feel Free To Ask.
5.) Save And Done.

Recommended For You:

Choosing The Right SEO Provider To Bring Your Website To The Top Of Google