Cara Membuat Slide Show Transparant Image Slider Keren Di Blog
By
Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja.
Pada pertemuan kali ini saya akan berbagi Slider dengan tampilan Transparant Image menggunakan Jquery atau disebut dengan javasript. dengan tampilan transparant sebelum terfokuskan pada judulnya dan akan nampak lebih jelas jika sudah gilirannya atau kita memilih gambar tersebut.
Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan tampilan yang sangat keren. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :
Baiklah berikut ini tag html yang dapat membangun Slide Image nya :
Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK
Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..css
<style>
.sixtyright { width: 46%;margin-left:30%;background:rgba(28,139,183,1);height:250px;float: center; }
/***** Carousel *****/
.carousel {
margin: 0 auto;
border: none;
padding: 20px 0 0;
}
.carousel .slides {
float: left;
margin: 20px 0 0 30px;
padding: 0;
border: none;
list-style: none;
position: relative;
}
.carousel .slides .slideItem {
position: absolute;
cursor: pointer;
padding: 5px;
border-radius: 4px;
margin: 0;
border: none;
background: rgba(255, 255, 255, 1);
}
.carousel .slides .slideItem a {
display: block;
text-decoration: none;
margin: 0;
padding: 0;
border: none;
}
.carousel .slides .slideItem img {
margin: 0;
padding: 0;
border: none;
display: block;
width: 100%;
height: 100%;
}
.carousel .description {
color: #000;
font-size: 14px;
float: left;
clear: both;
margin: 22px 0 0 13px;
height: 20px;
position: relative;
z-index: 999;
text-align: center;
left: 0;
width: 100%;
white-space: nowrap;
display: block;
}
.carousel .description h3 a {
color: #000;
}
.carousel .text {
display: none;
}
.temp {
position: absolute;
opacity:0
}
.carousel .description a:hover {
color: blue;
}
.carousel #next {
cursor: pointer;
display: inline-block !important;
color: #blue;
margin: 0 0 0 8px;
position: relative;
top: 1px;
}
.carousel #next:hover {
color: red;
}
.carousel .prevButton {
display: none;
}
.carousel .holder {
position: relative;
}
.carousel .right {
position: absolute;
top: 0;
left: -40px;
cursor: pointer;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,1)), color-stop(32%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,0)));
background: -webkit-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: linear-gradient(to right, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
z-index: 99;
}
.carousel .left {
position: absolute;
top: 0;
cursor: pointer;
right: -40px;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,0)), color-stop(68%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,1)));
background: -webkit-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: linear-gradient(to right, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
z-index: 99;
}
.boutique img {
margin: 0;
padding: 5px;
border-radius: 3px;
background-color: #ededed;
}
.carousel .remove {
display: none !important;
}
.carousel .frame3 img {
margin: 0 !important;
box-shadow: 0 1px 13px rgba(0,0,0,.47);
}
.boutique {
margin: 0;
padding: 0;
position: relative;
z-index: 1
}
.boutique li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
display: none;
border-width: 0
}
.boutique img {
border: 0;
vertical-align: bottom
}
.boutique a, .boutique a:hover {
cursor: default;
text-decoration: none;
outline: none
}
.boutique img, .boutique li, .boutique a {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
cursor: pointer;
}
.carousel .holder {
width: 490px;
margin: 10px 50px 0 0;
float: right;
}
</style>
html
<div class="sixtyright">
<div class="carousel ">
<div class="holder">
<div class="right">
</div>
<div class="left">
</div>
<ul id="team">
<li><a href="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9oRNKjQMifdlvOKHJVmOuLE9Adhy0VTZng8SMYT4tOmRUvoRZ7EAdYkRJz8TIu7VZ-C-NPuutw9EYtJqC2laZQ4VUktsrFAGCnvD5SxZB_ztYtKe_lHc6W2JGhv9dkvVaevodY1CMI8B/s1600/naruto.jpg" alt=slider image transparant" /></a></li>
<li><a href="2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMSa5KYGbpYOrYfxmMPvPHfX07Dc63ZypN0JJvRh8k_q7I_1daLMqR7q4v1WIlnTZJn4IbVIqQy7lwt947CFAEikJi7aUfj8QphpPnNTYV00BUQxdIybETAzDHZuykxbtahq31sA2uo3w/s1600/luffy.jpg" alt="slider image transparant" /></a></li>
<li><a href="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggue14F46Nmxq2zbQulPcms9Jhxd9qnh4C2qB8e9Texwv1LfpOa31Aw8OiWqCXTo28qSAr7R3LhX_6erVHro1Frcz9Xm_2qQWDk3ZVK4sjBSiFxcqmZ1Ef3AcH-1g_N9GUmSO_ZK9SkkmM/s1600/ichigo.jpg" alt="slider image transparant" /></a></li>
<li><a href="4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQFMFp5NN1cd9NSCbtVF03evkkdBt8epGkSji6tOpvt42776LKPjocQJWxi2Z5Tq5zFtZES01_TXlnxsXK40rIPZ5c-FsnuTv5XwZxyRhRlBcpda2bcClBihJDirsuqN35Ya44MOAfjb6U/s1600/goku.jpg" alt="slider image transparant" /></a></li>
<li><a href="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicHUHi7SLdjp_0U-2BJswl6wWeR0TbGyKSA99wMbHq91wOFLtLgu5OUoyFUCTUWKqZaw_732MiM8pALOULdSbU-4GairKdr44LMCGmLKXO3J2EeWSC8mKmS8jeLje6h1lms9cBLrBHdUST/s1600/fairly_tail.jpg" alt="slider image transparant" /></a></li>
<li><a href="6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFR091r9s4zsZlxbvJvQLDd3uhz6HRVMtAd-aaLvz89ePRngUncGlSdmMpMZkv8nlLgUhomLHIzY2ddnmoLRNIc5TIzAqIAi-SilQjkaYaqqJrkRO51dwLtLDw1M04hPOVvJf5iZyV734u/s1600/Death_Note_Ryuk_w.jpg" alt="slider image transparant" /></a></li>
</ul>
<div class="text">
<span><a href="#" title="Uzumaki Naruto">
<strong> Uzumaki Naruto </strong>
</a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong></span>
<span><a href="#" title="Monkey D'Luffy">
<strong>Monkey D'Luffy </strong></a> seorang <strong> Kapten </strong> dari <strong> Bajak Laut</strong></span>
<span><a href="#" title="Kurosaki Ichigo">
<strong> Kurosaki Ichigo </strong></a> seorang <strong> Shinigami </strong> atau <strong> Dewa Kematian </strong></span>
<span><a href="#" title="Son Goku">
<strong> Son Goku </strong></a> seorang <strong> Manusia </strong> dengan <strong> Kekuatan Seiya </strong></span>
<span><a href="#" title="Lucy Heartfilia">
<strong> Lucy Heartfilia </strong></a> seorang <strong> Penyihir </strong> yang <strong> Mencari Naga </strong></span>
<span><a href="#" title="Light Yagami">
<strong> Light Yagami </strong></a> seorang <strong> Siswa </strong> yang <strong> Jenius </strong></span>
</div>
<div class="description">
<h3>
<span class="term-one">
<a href="#" title="Uzumaki Naruto">
<strong> Uzumaki Naruto </strong>
</a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong>
</span>
</h3>
</div>
</div>
</div>
</div>
jquery
<script src="https://doc-00-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/35cmfd6pr94di4dj1b6ko2tlisftajln/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7oZEJFNFB5ZlN2SHc?h=16653014193614665626&e=download"></script>
<script>
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
</script>
<script src="https://doc-14-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/5bbkvq3hadmnvn3bp5bffs4qccdp418f/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7oaVVUMjdodHBuSUk?e=download&h=16653014193614665626&nonce=ep2gv86v5r3o6&user=11363352952214392690&hash=6u1ffc1dmk6hsba6cbpcb3etbutc17ri"></script>
<script src="https://doc-0g-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/64kklvg9krbb4oefgkfofo5l7l2hq3vv/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7odEtmWGxhTVY4dW8?h=16653014193614665626&e=download"></script>
Adapun File nya dapat dilihat hasilnya dan dapat juga diunduh berikut di bawah ini :
Demo Unduh
