Jcarousel Dengan Jquery

Fungsi dari jcarousel ini bisa untuk banyak hal salah satunya bisa untuk Foto Galery,dengan menggunakan Jquery cenderung lebih ringan dari javascript yang lainnya.




Untuk cara membuatnya silahkan ikuti langkah-langkah dibawah ini:

1.Silahkan login ke Blogger
2.Pada Dasbor Klik Tata Letak
3.Klik Edit Html ->> Expand Template Widget
4.Kemudian copy paste code berikut dan letakan di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5.Copy Paste Lagi Code Berikut dan letakan di bawah code diatas

<script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/>
<script>

jQuery(document).ready(function() {
jQuery(&#39;#mycarousel&#39;).jcarousel();
});

</script>

6.Copy Code Css Berikut dan letakan di atas code ]]></b:skin>

.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #f0f0f0;
border: 1px solid #333;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}

/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPbh6LcQ3kG3F2vu_zLojyFS_q58MuKkiZRhPj79nCThC0s593aCksK5RRSyM7BHGy0zyTMHtQk366CDaOQqA0KYASrkz0vGvUSMmgVUas0OILRckaqcPRjx2bGb-jAPMEt65mHyUqFM/s1600/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEz8An5cIXeUNACgfVaZIbxpVk7soLccS7UiqmES9axksBZ0jejuzicDhbWwi0r9liFrXLFnATxIND8WyVwWKIZ7nH1DS4epq3K_ZKf6wX5thPnGxPw6_FKBJqRKX49m_B3xGWA4lM2bg/s1600/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}

Lalu Simpan Template

7.Langkah Terakhir Klik Add Gadget ->> Html/javascript dan masukan code di bawah ini ke dalamnya..

<div class="jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 850px;"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div>

8.klik Simpan

Sumber artikel http://sorgalla.com/projects/jcarousel

ARTIKEL TERKAIT

JQuery

• Data Atribut Dalam Html Dan Jquery
• Simple Navigation Rocketbar With Jquery & Css3
• Jquery Slick Tab Menu
• Different Top Navigation With Jquery
• Vertical Sliding Panel Menu With Jquery
• Mosaic Slideshow With Jquery dan Css
• Slide Panel For Blog
• Menu Navigasi Dengan Tooltip