Two Dimensional Text Description Plus Image JQuery Slider

You’ll find website need several attentions which can only get by a great Slider which may possibly catch your prospective customers eyes together with allow the criminals to stay there which can increase the big benefits additionally. So process it but also need to worry about to the back conclude issues. There are a lot of sliders upon internet nevertheless the size will tend to be to high which can effect your starting interval so visualize hard before using them.
Now there are several one available only and not features are ok to work with them because you need to watch out your own loading time too so think carefully before using the codes in your web that will make your loading time high of bad SEO consequence. But this the first is light weight and possess to bunch involving codes. All is the following you you also do not have to hit any people URLs. Now do it and garb the code to work with it.

Features:

1.) Pure JavaScript JQuery Added.
2.) JQuery File Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Domain.
7.) Can Set The Post Count Too.
8.) Stylish In Design.
9.) Loading Icon.
10.) Pick Image, Text, Title.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JQuery:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#lofslidecontent45').lofJSidernews( { interval:5000,
easing:'easeInOutQuad',
duration:1250,
auto:true } );
});
</script>
<script type="text/javascript">
(function($){$.fn.lofJSidernews=function(a){return this.each(function(){new $.lofSidernews(this,a)})};$.lofSidernews=function(a,b){this.settings={direction:"",mainItemSelector:"li",navInnerSelector:"ul",navSelector:"li",navigatorEvent:"click",wapperSelector:".lof-main-wapper",interval:4e3,auto:true,maxItemDisplay:4,startItem:0,navPosition:"vertical",navigatorHeight:70,navigatorWidth:200,duration:600,navItemsSelector:".lof-navigator li",navOuterSelector:".lof-navigator-outer",isPreloaded:false,easing:"easeInOutQuad"};$.extend(this.settings,b||{});this.nextNo=null;this.previousNo=null;this.maxWidth=this.settings.mainWidth||730;this.wrapper=$(a).find(this.settings.wapperSelector);this.slides=this.wrapper.find(this.settings.mainItemSelector);if(!this.wrapper.length||!this.slides.length)return;if(this.settings.maxItemDisplay>this.slides.length){this.settings.maxItemDisplay=this.slides.length}this.currentNo=isNaN(this.settings.startItem)||this.settings.startItem>this.slides.length?0:this.settings.startItem;this.navigatorOuter=$(a).find(this.settings.navOuterSelector);this.navigatorItems=$(a).find(this.settings.navItemsSelector);this.navigatorInner=this.navigatorOuter.find(this.settings.navInnerSelector);if(this.settings.navPosition=="horizontal"){this.navigatorInner.width(this.slides.length*this.settings.navigatorWidth);this.navigatorOuter.width(this.settings.maxItemDisplay*this.settings.navigatorWidth);this.navigatorOuter.height(this.settings.navigatorHeight)}else{this.navigatorInner.height(this.slides.length*this.settings.navigatorHeight);this.navigatorOuter.height(this.settings.maxItemDisplay*this.settings.navigatorHeight);this.navigatorOuter.width(this.settings.navigatorWidth)}this.navigratorStep=this.__getPositionMode(this.settings.navPosition);this.directionMode=this.__getDirectionMode();if(this.settings.direction=="opacity"){this.wrapper.addClass("lof-opacity");$(this.slides).css("opacity",0).eq(this.currentNo).css("opacity",1)}else{this.wrapper.css({left:"-"+this.currentNo*this.maxSize+"px",width:this.maxWidth*this.slides.length})}if(this.settings.isPreloaded){this.preLoadImage(this.onComplete)}else{this.onComplete()}};$.lofSidernews.fn=$.lofSidernews.prototype;$.lofSidernews.fn.extend=$.lofSidernews.extend=$.extend;$.lofSidernews.fn.extend({startUp:function(a,b){seft=this;this.navigatorItems.each(function(a,b){$(b).click(function(){seft.jumping(a,true);seft.setNavActive(a,b)});$(b).css({height:seft.settings.navigatorHeight,width:seft.settings.navigatorWidth})});this.setNavActive(this.currentNo);if(this.settings.buttons&&typeof this.settings.buttons=="object"){this.registerButtonsControl("click",this.settings.buttons,this)}if(this.settings.auto)this.play(this.settings.interval,"next",true);return this},onComplete:function(){setTimeout(function(){$(".preload").fadeOut(900)},400);this.startUp()},preLoadImage:function(a){var b=this;var c=this.wrapper.find("img");var d=0;c.each(function(a,e){if(!e.complete){e.onload=function(){d++;if(d>=c.length){b.onComplete()}};e.onerror=function(){d++;if(d>=c.length){b.onComplete()}}}else{d++;if(d>=c.length){b.onComplete()}}})},navivationAnimate:function(currentIndex){if(currentIndex<=this.settings.startItem||currentIndex-this.settings.startItem>=this.settings.maxItemDisplay-1){this.settings.startItem=currentIndex-this.settings.maxItemDisplay+2;if(this.settings.startItem<0)this.settings.startItem=0;if(this.settings.startItem>this.slides.length-this.settings.maxItemDisplay){this.settings.startItem=this.slides.length-this.settings.maxItemDisplay}}this.navigatorInner.stop().animate(eval("({"+this.navigratorStep[0]+":-"+this.settings.startItem*this.navigratorStep[1]+"})"),{duration:500,easing:"easeInOutQuad"})},setNavActive:function(a,b){if(this.navigatorItems){this.navigatorItems.removeClass("active");$(this.navigatorItems.get(a)).addClass("active");this.navivationAnimate(this.currentNo)}},__getPositionMode:function(a){if(a=="horizontal"){return["left",this.settings.navigatorWidth]}return["top",this.settings.navigatorHeight]},__getDirectionMode:function(){switch(this.settings.direction){case"opacity":this.maxSize=0;return["opacity","opacity"];default:this.maxSize=this.maxWidth;return["left","width"]}},registerWheelHandler:function(a,b){a.bind("mousewheel",function(a,b){var c=b>0?"Up":"Down",d=Math.abs(b);if(b>0){}else{}return false})},registerButtonsControl:function(a,b,c){for(var d in b){switch(d.toString()){case"next":b[d].click(function(){c.next(true)});break;case"previous":b[d].click(function(){c.previous(true)});break}}return this},onProcessing:function(a,b,c){this.previousNo=this.currentNo+(this.currentNo>0?-1:this.slides.length-1);this.nextNo=this.currentNo+(this.currentNo<this.slides.length-1?1:1-this.slides.length);return this},finishFx:function(a){if(a)this.stop();if(a&&this.settings.auto){this.play(this.settings.interval,"next",true)}this.setNavActive(this.currentNo)},getObjectDirection:function(start,end){return eval("({'"+this.directionMode[0]+"':-"+this.currentNo*start+"})")},fxStart:function(a,b,c){if(this.settings.direction=="opacity"){$(this.slides).stop().animate({opacity:0},{duration:this.settings.duration,easing:this.settings.easing});$(this.slides).eq(a).stop().animate({opacity:1},{duration:this.settings.duration,easing:this.settings.easing})}else{this.wrapper.stop().animate(b,{duration:this.settings.duration,easing:this.settings.easing})}return this},jumping:function(no,manual){this.stop();if(this.currentNo==no)return;var obj=eval("({'"+this.directionMode[0]+"':-"+this.maxSize*no+"})");this.onProcessing(null,manual,0,this.maxSize).fxStart(no,obj,this).finishFx(manual);this.currentNo=no},next:function(a,b){this.currentNo+=this.currentNo<this.slides.length-1?1:1-this.slides.length;this.onProcessing(b,a,0,this.maxSize).fxStart(this.currentNo,this.getObjectDirection(this.maxSize),this).finishFx(a)},previous:function(a,b){this.currentNo+=this.currentNo>0?-1:this.slides.length-1;this.onProcessing(b,a).fxStart(this.currentNo,this.getObjectDirection(this.maxSize),this).finishFx(a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}var d=this;this.isRun=setTimeout(function(){d[b](true)},a)},stop:function(){if(this.isRun==null)return;clearTimeout(this.isRun);this.isRun=null}})})(jQuery);jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b+c;return-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b+c;return d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b+c;return-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b*b+c;return d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return b==0?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){if(b==0)return c;if(b==e)return c+d;if((b/=e/2)<1)return d/2*Math.pow(2,10*(b-1))+c;return d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){if((b/=e/2)<1)return-d/2*(Math.sqrt(1-b*b)-1)+c;return d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e/2)==2)return c+d;if(!g)g=e*.3*1.5;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);if(b<1)return-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c;return h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)*.5+d+c},easeInBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;if((b/=e/2)<1)return d/2*b*b*(((f*=1.525)+1)*b-f)+c;return d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){if((b/=e)<1/2.75){return d*7.5625*b*b+c}else if(b<2/2.75){return d*(7.5625*(b-=1.5/2.75)*b+.75)+c}else if(b<2.5/2.75){return d*(7.5625*(b-=2.25/2.75)*b+.9375)+c}else{return d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}},easeInOutBounce:function(a,b,c,d,e){if(b<e/2)return jQuery.easing.easeInBounce(a,b*2,0,d,e)*.5+c;return jQuery.easing.easeOutBounce(a,b*2-e,0,d,e)*.5+d*.5+c}});
</script>

CSS:

<style>
#container{width:965px;background:#FFF;font-size:11px;margin:0 auto;padding:0}
.lof-slidecontent{position:relative;overflow:hidden;border:0;width:965px;height:280px;font-family:Arial, Helvetica, sans-serif}
.lof-slidecontent .preload{height:100%;width:100%;background:#FFF;position:absolute;top:0;left:0;z-index:100000;color:#FFF;text-align:center}
.lof-slidecontent .preload div{height:100%;width:100%;background:transparent url(slider/images/load-indicator.gif) no-repeat scroll 50% 50%}
.lof-main-outer{position:relative;height:100%;width:730px;z-index:3px;overflow:hidden}
.lof-main-item-desc{z-index:100px;position:absolute;bottom:0;left:0;width:729px;height:69px;background:url(slider/images/transparent_bg.png)}
.lof-main-item-desc p{color:#FFF;margin:0 8px;padding:8px 0}
ul.lof-main-wapper{background:transparent url(slider/images/load-indicator.gif) no-repeat scroll 50% 50%;height:280px;width:730px;position:absolute;overflow:hidden;margin:0;padding:0}
ul.lof-main-wapper li{overflow:hidden;height:100%;width:730px;float:left;position:relative;margin:0;padding:0}
.lof-opacity li{position:absolute;top:0;left:0;float:inherit}
ul.lof-main-wapper li img{width:730px;padding:0}
ul.lof-navigator{top:0;position:absolute;width:100%;font-family:Arial, Helvetica, sans-serif;margin:0;padding:0}
ul.lof-navigator li{cursor:pointer;list-style:none;width:100%;margin:0;padding:0}
.lof-navigator-outer{position:absolute;left:715px;right:0;top:0;z-index:100;height:280px;width:220px;color:#FFF}
.lof-navigator li.active{background:url(https://www.czone.com.pk/Files/slider/images/arrow-blue.png) no-repeat scroll left center;color:#FFF}
.lof-navigator li h3{color:#333;font-size:100%;margin:0;padding:15px 0 0!important}
.lof-navigator li div{background-color:#E7E7E7;color:#333;height:100%;position:relative;margin-left:15px;padding-left:15px;border-top:1px solid Silver;border-right:1px solid Silver;width:219px}
.lof-navigator li.active div{background-color:#003B63;border-right:1px solid #003B63;color:#FFF}
.lof-navigator li img{height:60px;width:60px;float:left;border:#C5C5C5 solid 1px;margin:15px 15px 10px 0;padding:3px}
.lof-navigator li.active img{border:##6C8E5C solid 1px}
.lof-navigator li.active h3{color:#FF0}
</style>

HTML:

<div id="header1_divHeaderSlider" style="width:965px;margin:0 auto;">
<div id="header1_HeaderBanner1_container">
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload" style="display: none;">
<div></div>
</div>
<!-- MAIN CONTENT -->
<div class="lof-main-outer">
<ul class="lof-main-wapper" style="left: -1460px; width: 5110px;">
<li>
<img src="https://www.czone.com.pk/images/banners/61.jpg" id="header1_HeaderBanner1_rptBanners_ctl00_imgBanner" title="Find low prices on a wide selection of tablets." onclick="window.open('http://www.czone.com.pk/tablet-pc-pakistan-ppt.278.aspx');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl00_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/tablet-pc-pakistan-ppt.278.aspx');" style="cursor:pointer;display:none;">
<p>
<b>Shop Tablets</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/65.jpg" id="header1_HeaderBanner1_rptBanners_ctl01_imgBanner" title="Proven to get it done. In a big way. The HP Pavilion 15 is a tried-and-true notebook. " onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=2230');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl01_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=2230');" style="cursor:pointer;display:none;">
<p>
<b>HP Pavilion 15-e052se Notebook PC</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/55.jpg" id="header1_HeaderBanner1_rptBanners_ctl02_imgBanner" title="Superb visuals and graphics performance" onclick="window.open('http://www.czone.com.pk/processors-intel-core-i5-processors-pakistan-pt.87.aspx');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl02_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/processors-intel-core-i5-processors-pakistan-pt.87.aspx');" style="cursor:pointer;display:none;">
<p>
<b>4th Generation Intel® Core™ Processors Are Here</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/53.jpg" id="header1_HeaderBanner1_rptBanners_ctl03_imgBanner" title="Get stunning picture clarity, smooth video &amp; accurate color." onclick="window.open('http://www.czone.com.pk/graphic-cards-pakistan-ppt.154.aspx');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl03_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/graphic-cards-pakistan-ppt.154.aspx');" style="cursor:pointer;display:none;">
<p>
<b>Find the right graphics card for your computer!</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/37.jpg" id="header1_HeaderBanner1_rptBanners_ctl04_imgBanner" title="Throughout your busy week, stay connected to everything that you love 24/7." onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=1334');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl04_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=1334');" style="cursor:pointer;display:none;">
<p>
<b>Stay connected to what matters most</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/47.jpg" id="header1_HeaderBanner1_rptBanners_ctl05_imgBanner" title="One Touch Entertainment. " onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=982');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl05_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/ProductDetail.aspx?p=982');" style="cursor:pointer;display:none;">
<p>
<b>Fujitsu LIFEBOOK AH532</b><br>
</p>
</div>
</li>
<li>
<img src="https://www.czone.com.pk/images/banners/63.jpg" id="header1_HeaderBanner1_rptBanners_ctl06_imgBanner" title="Game Faster ! Quieter ! Cooler" onclick="window.open('http://www.czone.com.pk/graphic-cards-pakistan-ppt.154.aspx');" style="cursor:pointer;">
<div id="header1_HeaderBanner1_rptBanners_ctl06_divDesc" class="lof-main-item-desc" onclick="window.open('http://www.czone.com.pk/graphic-cards-pakistan-ppt.154.aspx');" style="cursor:pointer;display:none;">
<p>
<b>Asus Graphic Cards</b><br>
</p>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="lof-navigator-outer" style="height: 280px; width: 200px;">
<ul class="lof-navigator" style="height: 490px; top: 0px;">
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>Shop Tablets</h3>
Find low prices on a wide selection of tablets.
</div>
</li>
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>HP Pavilion 15-e052se Notebook PC</h3>
Proven to get it done. In a big way. The HP Pavilion 15 is a tried-and-true notebook.
</div>
</li>
<li class="active" style="height: 70px; width: 200px;">
<div>
<h3>4th Generation Intel® Core™ Processors Are Here</h3>
Superb visuals and graphics performance
</div>
</li>
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>Find the right graphics card for your computer!</h3>
Get stunning picture clarity, smooth video &amp; accurate color.
</div>
</li>
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>Stay connected to what matters most</h3>
Throughout your busy week, stay connected to everything that you love 24/7.
</div>
</li>
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>Fujitsu LIFEBOOK AH532</h3>
One Touch Entertainment.
</div>
</li>
<li class="" style="height: 70px; width: 200px;">
<div>
<h3>Asus Graphic Cards</h3>
Game Faster ! Quieter ! Cooler
</div>
</li>
</ul>
</div>
<!-- END NAVIGATOR -->
</div>
<!------------------------------------- END OF THE CONTENT ------------------------------------------------->
</div>
</div>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Also Change Your Image And Text. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…