Create jCarousel Conten Slider With jQuery

Kali ini saya akan memberikan tutorial cara membuat 'jCarousel Conten Slider With jQuery' dan tutorial kli ini tanpa sengaja saya temukan di salah satu situs yg kebetulan themes itu harus berbayar, nah tanpa pikir panjang saya coba untuk mengambil HTML dari content slider yg terpasang di themes ini, oia klw sobat ingin melihat situs yang tadi saya maksud, bisa klik disini,,, :D

ya udah kita langsung saya melihat hasilnya dibawah ini yg sudah saya modif..

Example jCarousel Conten Slider With jQuery!


dan untuk memasangnya dibawah ini saya sudah memberikan kode CSS,SCRIPT & HML yg bisa sobat pasang di template..

CSS::

/*--Bottom Container--*/
#bottom-container {
background:#111;
width:730px;overflow:hidden;
height:165px;
border-top:1px solid #333;border-bottom:1px solid #f9f9f9;
margin:5px auto;
float:left;
}
/*--Recent Works--*/
#recent-works {
width:730px;
margin:0 auto;
margin-top:35px;
float:left;
}
.rw-text {margin-top:-5px;
width:220px;
float:left;
margin-left:20px;
}
.rw-text h2 {text-transform:uppercase;font-weight:400;
font-family:century gothic;
font-weight:bold;text-align:center;
color:#932601;text-shadow:0 1px 1px #000;
font-size:20px;
}
.rw-text p {text-align:justify;
font-family:century gothic;
font-size:13px;
color:#bbb;text-shadow:0 -1px 1px #000;
line-height:21px;
clear:both;
padding:0;
overflow:hidden;
height:60px;
}

#bottom-container img{-webkit-transform:scale(1.0);-moz-transform:scale(1.0);-o-transform:scale(1.0);-ms-transform:scale(1.0);transform:scale(1.0);-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;}
#bottom-container img:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}

#mycarousel li img {width:150px;height:137px;}

/*--Jcarousel--*/
.jcarousel-skin-tango .jcarousel-container {
float:left;
}
.jcarousel-skin-tango .jcarousel-direction-rtl {
direction:rtl;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width:395px;
height:100px;
margin-left:20px;
}
.jcarousel-skin-tango .jcarousel-clip {
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
height:100px;
overflow:hiddden;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left:0;
margin-right:13px;
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-item {
width:110px;
height:84px;
border:6px solid #222;
}
/* Horizontal Buttons */
.jcarousel-skin-tango .jcarousel-next-horizontal {
position:absolute;
top:20px;
right:-48px;
width:32px;
height:32px;
cursor:pointer;
background:transparent url(http://www.3host-ks.com/overlay/images/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left:5px;
right:auto;
background-image:url(http://www.3host-ks.com/overlay/images/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
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:focus,.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor:default;
background-position:-96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position:absolute;
top:52px;
right:-49px;
width:32px;
height:32px;
cursor:pointer;
background:transparent url(http://www.3host-ks.com/overlay/images/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left:auto;
right:5px;
background-image:url(http://www.3host-ks.com/overlay/images/next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
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:focus,.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor:default;
background-position: -96px 0;
}

SCRIPT::

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

<script type="text/javascript" src="http://ut2a-4down-blogspot-com.googlecode.com/files/jCarousel_content.js"></script>

<script type="text/javascript">
//<![CDATA[
// Jcarousel
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});

// Fade
jQuery(document).ready(function() {
$('#mycarousel img').hide();
$('#mycarousel img').fadeIn(800);
});
//]]>
</script>

HTML::

<!--Bottom Container-->
<div id="bottom-container">
<!--Recent Works-->
<div id="recent-works">
<div class="rw-text">
<h2>Recent Works</h2>
<p>
Lorem ipsum dolor sit amet, consect etuer adipiscing elit, sed diam nonummy nibh euismod!
</p>
</div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://pap.az/uploads/pap/fotos/friends-girl-sweet.jpg" alt=""/></li>
<li><img src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/06/photography-sweet-little-girl-wallpaper-320x240.jpg" alt=""/></li>
<li><img src="http://pap.az/uploads/pap/fotos/girl-sweet-black-cat.jpg" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-UqdLT-utNhNXXjRk184f0uiQsGez6xWYHMD__WdV4f3ZSQcDK2toogKGMfaWBu7QciHOFq-T2SJJ6KdGVBpEkx2KRjpi238SSbniT1_DocMu0O2wgDfPFFK9dQUZPoIr2Qm5JabXC3lA/s400/sweet-model-girl-5_wallcoo.com" alt=""/></li>
<li><img src="http://s3.favim.com/orig/47/emma-watson-girl-london-smile-sweet-pea-Favim.com-438499.jpg" alt=""/></li>
<li><img src="http://photogallery.indiatimes.com/celebs/indian-stars/ameesha-patel/ameesha-to-play-a-prostitute/photo/11414173/Actress-Ameesha-Patel-is-finally-shedding-her-sweet-girl-next-door-look-and-is-set-to-don-a-spicy-cracker-of-a-role-of-a-high-profile-prostitute-.jpg" alt=""/></li>
<li><img src="http://images.fineartamerica.com/images-medium/smiles-sweet-smiley-cute-girl-becca-watters.jpg" alt=""/></li>
<li><img src="http://www.baby-pictures.org/wp-content/uploads/2011/03/Wallpaper-of-Sweet-Baby-Girl-480x350.jpg" alt=""/></li>
<li><img src="http://www.wallcoo.net/celebrity/horikita_maki/images/%5Bwallcoo_com%5D_PhotoBook_Horikita.Maki_NS.EYES.No.2_014.jpg" alt=""/></li>
<li><img src="http://s5.favim.com/orig/54/demi-lovato-girl-sweet-Favim.com-533140.jpg" alt=""/></li>
<li><img src="http://www.flashcoo.com/Celebrity/Horikita_Maki/images/%5Bwallcoo_com%5D_PhotoBook_Horikita.Maki_NS.EYES.No.2_015.jpg" alt=""/></li>
</ul>
</div>
</div>
<div class='clear'></div>
<!--End Bottom Container-->

Silahkan dirubah sesuai keinginan, good luck ^^ Please rate this article: