Pusing dari 3 hari yang lalu, mencari tutorial bagaimana membuat Slider Scroll dengan menggunakan Jquery dan CSS, saya googling kemana-mana tidak dapat juga. Sliding yang ada hanyalah slide biasa beserta Numericnya doang....
Alhamdulillah, sekarang dapat juga itu slider dengan mengambil refrensi dari salah satu website asing di internet, opsss sorry i forgotten that's it.... :-)
Ok kawan, ini saya jelaskan cara kerja dari Slider tersebut, cara kerjanya simple sebenarnya yaitu
1. The First, slider menampilan Potongan Artikel untuk urutan yang pertama doang...
2. Slider, mengaktifkan tombol next jika terdapat banyak artikel yang ditumpuk dalam slider, dan disisi lain slider menonaktifkan tombol prev untuk mencegah user melihat artikel akhir dari tombol prev
3. Slider menghitung banyaknya artikel dalam slide, dan menyusunnya menjadi beberapa tumpukan
4. saat user menekan tombol prev atau next? maka slider menampilkan urutan suku setelahnya atau sebelumnya.
5. jika sampai pada artikel akhir, maka salah satu tombol dinonaktifkan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body{
color:#000;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto;
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px;
height:263px;
}
.control {
display:block;
width:39px;
height:63px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
margin-top:250px;
}
.not-controlLeft,.not-controlRight {
display:block;
width:39px;
height:63px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
margin-top:250px;
cursor:default;
}
.numbers{
margin-left:560px;
position:absolute;
margin-top:255px;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/prev.jpg) no-repeat 0 0;
margin-left:525px;
z-index:4;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/next.jpg) no-repeat 0 0;
}
* {
margin:0;
padding:0;
font:normal 11px Verdana, Geneva, sans-serif;
color:#000;
}
a {
color: #fff;
font-weight:bold;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#pageContainer {
margin:0 auto;
width:960px;
}
#pageContainer h1 {
display:block;
width:960px;
height:114px;
text-indent: -10000px;
}
.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#000;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
}
#footer {
height:100px;
}
#footer p {
margin:30px auto 0 auto;
display:block;
width:560px;
height:40px;
}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
.css({
'float' : 'left',
'width' : slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.prepend('<span class="not-controlLeft" id="not-leftControl">Not Active Left</span>')
.prepend('<span class="not-controlRight" id="not-rightControl">Not Active Right</span>')
.prepend('<span class="numbers" id="numbers"></span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
manageControls(currentPosition);
$('.control')
.bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
function manageControls(position){
if(position==0){ $('#leftControl').hide();$('#not-rightControl').css({'background':'transparent url(img/not-prev.jpg) no-repeat 0 0','margin-left':525}); } else{ $('#leftControl').show() }
if(position==numberOfSlides-1){ $('#rightControl').hide(); $('#not-rightControl').css({'background':'transparent url(img/not-next.jpg) no-repeat 0 0','margin-left':600}); } else{ $('#rightControl').show() }
switch(position){
case 0 : $('.numbers').html(position+1 +' of '+numberOfSlides);
case 1 : $('.numbers').html(position+1 +' of '+numberOfSlides);
case 2 : $('.numbers').html(position+1 +' of '+numberOfSlides);
case 3 : $('.numbers').html(position+1 +' of '+numberOfSlides);
}
}
});
</script>
</head>
<body>
<div id="pageContainer">
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<h2>Tau Ah.......0</h2>
<p>ini isi tau ah 0</p>
</div>
<div class="slide">
<h2>Tau Ah.......1</h2>
<p>ini isi tau ah 1</p>
</div>
<div class="slide">
<h2>Tau Ah.......2</h2>
<p>ini isi tau ah 2</p>
</div>
<div class="slide">
<h2>Tau Ah.......3</h2>
<p>ini isi tau ah 3</p>
</div>
</div>
</div>
</div>
</body>
</html>
Post a Comment