LATEST >>

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

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Add Awesome And Stylish Two Ways JQuery Slider

Add Awesome And Stylish Two Ways JQuery Slider

This Article Was Live On December 27th, 2015 And So Far Have: 2 Comments...
Last Updated on December 27th, 2015

Add-Awesome-And-Stylish-Two-Ways-JQuery-Slider
You’ll find website have to get several attentions which might only get by an unbelievable Slider which may well catch your potential customers eyes together with let the criminals to stay there which might increase the large benefits additionally. So process it but should also worry about for the back conclude issues. There are many sliders upon internet nevertheless the size will tend to be to high which might effect your launching interval so imagine hard before using them.
This JavaScript-JQuery Impression Slider manufactured by utilizing JQuery together with JavaScript technique, there is a jquery include but zero outer jquery record. It will always be pretty wonderful slider which work towards all key web browser, including FOR EXAMPLE variants via IE9 to be able to IE11. This Slider is reasonably custom-made and capability to add fundamentally graphics. On top of their, it allow anyone add wording and back-links into etc involved with it. It is actually Light Fat Slider given that it’s didn’t use any kind jquery so it ensure your blog should not reduce.

Features:

1.) JavaScript and JQuery Added.
2.) External JQuery File.
3.) Pure CSS3 Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

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.

CSS:

<style type="text/css">
#slidearea{
height: 330px;
overflow: hidden;
position: relative;
width:970px;
background:url(https://1.bp.blogspot.com/-WPKu-eb2G_Q/URwHoWBbNvI/AAAAAAAACr4/SqzPbo2NvjY/s000/slide.png) top no-repeat;
}
#gallerycover{
overflow: hidden;
height: 202px;
width:353px;
position:absolute;
left:52px;
top:25px;
}
.mygallery{
position:relative;
height: 202px;
width:353px;
}
.mygallery img{
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
height: 202px;
width:353px;
}
#textcover{
overflow: hidden;
height: 225px;
width:510px;
position:absolute;
right:20px;
top:50px;
}
.mytext{
display:inline;
float:left;
color:#c4c4c4;
}
.mytext ul li{
height: 225px!important;
}
.mytext h2 {
padding:5px 10px;
color:#fff;
font-size: 24px ;
width:480px;
font-weight:normal;
float:left;
font-family:Georgia, arial, tahoma, sans-seriff;
}
.mytext h2 a:link,.mytext h2 a:visited{
color:#fff;
}
.mytext p{
font-family:Georgia, arial, tahoma, sans-seriff;
padding:5px 10px;
color:#0b4e77;
font-size: 16px ;
line-height:22px;
width:480px;
float:left;
text-shadow:1px 1px 0px #2acaff;
}
.prevb{
float:left;
width:27px;
height:17px;
z-index:200;
position:absolute;
right:85px;
bottom:1px;
}
.nextb{
float:right;
width:27px;
height:17px;
z-index:200;
position:absolute;
right:45px;
bottom:1px;
display:block;
}
.feedlist{
height:33px;
}
.feedlist ul {
list-style:none;
}
.feedlist ul li{
float:left;
margin:0px 5px;
}
h2.date-header {
margin: 1.5em 0 .5em;
display: none;
}
.main .widget {
margin: 0 0 5px;
padding: 0 0 2px;
}
.main .Blog {
border-bottom-width: 0;
}
#header .description {
color:#ffffff;
font-size:14px;
text-shadow:0px 1px 0px #000000;
</style>

JavaScript:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t + b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d) + b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d) + 2*c*t/d + b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t)) + b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
flip *= -1;
c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
linear: function(x, t, b, c, d) {
return c*t/d + b; //linear
}
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
jQuery(function() {
jQuery(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
easing: "backout",
vertical: true,
auto: 4000,
speed: 1000
});
jQuery(".mytext").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 1,
auto: 4000,
easing: "backout",
speed: 1000
});
});
</script>

HTML:

<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<a href='ENTER-SLIDER-1-LINK-HERE'>
<img alt='' class='slimg' src='https://4.bp.blogspot.com/-bsPb5sV-eok/URwHo2eHlTI/AAAAAAAACsI/7qB_PTjqnMI/s000/img1.jpg'/>
</a>
</li>
<li>
<a href='ENTER-SLIDER-2-LINK-HERE'>
<img alt='' class='slimg' src='https://3.bp.blogspot.com/-JVW4nJCerMQ/URwHpYQKDgI/AAAAAAAACsQ/XJZuvFTKfRo/s000/img2.jpg'/>
</a>
</li>
<li>
<a href='ENTER-SLIDER-3-LINK-HERE'>
<img alt='' class='slimg' src='https://3.bp.blogspot.com/-bbOJIbOS3DY/URwHsZK9xUI/AAAAAAAACsU/ibjmfhF-aUM/s000/img3.jpg'/>
</a>
</li>
<li>
<a href='ENTER-SLIDER-4-LINK-HERE'>
<img alt='' class='slimg' src='https://1.bp.blogspot.com/-k_6-aoKe7Mg/URwHtJ4iVxI/AAAAAAAACsc/of1v1545baY/s000/img4.jpg'/>
</a>
</li>
</ul>
<div class='clear'></div>
</div>
</div>
<a class='prevb' href='#'><img alt='Previous' src='https://4.bp.blogspot.com/-aQUNBGjPoXc/URwHtTfm_BI/AAAAAAAACsk/7a0sOYdxqbw/s000/prev.png'/></a>
<a class='nextb' href='#'><img alt='Next' src='https://1.bp.blogspot.com/-etgA0qOkJOQ/URwHtmta6WI/AAAAAAAACss/NdDPtqS6bwQ/s000/next.png'/></a>
<div id='textcover'>
<div class='mytext'>
<ul>
<li>
<h2><a href='ENTER-SLIDER-1-LINK-HERE'>Enter Slide 1 Title Here</a></h2>
<p> Etiam tincidunt lobortis massa et tincidunt. Vivamus commodo feugiat turpis, in pulvinar felis elementum vel. Vivamus mollis tempus odio, ac imperdiet enim adipiscing non. Nunc iaculis sapien at felis posuere at posuere massa pellentesque. Suspendisse a viverra tellus. Nam ut arcu et leo rutrum porttitor. Integer ut nulla eu magna ... </p>
</li>
<li>
<h2><a href='ENTER-SLIDER-2-LINK-HERE'>Enter Slide 2 Title Here</a></h2>
<p> Proin ac leo eget nibh interdum egestas? Aliquam vel dolor vitae dui tempor sollicitudin! Integer sollicitudin, justo non posuere condimentum, mauris libero imperdiet urna, a porttitor metus lorem ac arcu. Curabitur sem nulla, rutrum ut elementum at, malesuada quis nisl. Suspendisse potenti. In rhoncus ipsum convallis mauris adipiscing aliquam. Etiam ... </p>
</li>
<li>
<h2><a href='ENTER-SLIDER-3-LINK-HERE'>Enter Slide 3 Title Here</a></h2>
<p> Etiam ultrices felis sed ante tincidunt pharetra. Morbi sit amet orci at lorem tincidunt viverra. Donec varius posuere leo et iaculis. Pellentesque ultricies, ante at dignissim rutrum, nisi enim tempor leo, id iaculis sapien risus quis neque. Ut sed mauris sit amet eros tincidunt adipiscing eu vitae lectus. Class aptent ... </p>
</li>
<li>
<h2><a href='ENTER-SLIDER-4-LINK-HERE'>Enter Slide 4 Title Here</a></h2>
<p> Pellentesque ut ante magna, eget suscipit metus. Sed scelerisque, urna non vehicula porta, urna tortor malesuada elit, vel ornare tortor diam vel augue? Nunc quis dolor vitae arcu ullamcorper sagittis. Nulla tincidunt velit at nibh ornare condimentum. Fusce metus libero, rhoncus vel ultricies sit amet, scelerisque in eros! Nam adipiscing ... </p>
</li>
</ul>
<div class='clear'></div>
</div>
</div>
</div>

Customization:

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

Recommended For You:
Secure Your Web Pages To Be Embedded Via HTML FRAMES

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…

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

2 Responses to “Add Awesome And Stylish Two Ways JQuery Slider”

  1. Kavin says:
    December 27, 2015 at 11:37 AM

    Nice post.. I will apply this slider on my website.. Thanks buddy

    Reply

Leave a Reply

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

Comments RSS Feed

Search Here

Web Safety

BOSS

exeideas.com

Free of toxic links

Approved by Sur.ly

2022

We Recommend

Advertise Here Advertise HereAdvertise HereAdvertise Here
TrendingLatest

Recent Comments

When We Posted

December 2015
M T W T F S S
 123456
78910111213
14151617181920
21222324252627
28293031  

Categories