jQuery Carousel
HTML
<div class="carousel" id="carousel">
<div class="carousel-inner">
<img src="img/1.jjpg" alt="">
<img src="img/2.jjpg" alt="">
<img src="img/3.jjpg" alt="">
<img src="img/4.jjpg" alt="">
</div>
</div>
<nav class="carousel-nav" id="carousel-nav">
<button data-direction="prev">Prev</button>
<button data-direction="next">Next</button>
</nav>
CSS
.carousel {
width:400px;
overflow:auto;
margin:0 auto .7em;
}
.carousel,
.carousel-inner {
height:100px;
}
.carousel img {
width:100px;
height:100px;
background-color:#ccc;
display:block;
float:left;
margin:0 5px;
}
.carousel-nav {
text-align:center;
}
.carousel-nav button {
cursor:pointer;
}
jQuery
(function($) {
var $carousel = $('#carousel'),
$container = $carousel.find('.carousel-inner'),
$nav = $('#carousel-nav'),
$img = $container.find('img'),
totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
$carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
$container.css('width', totalWidth); // Set lebar `.carousel-inner` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
$nav.find('button').on("click", function() {
// Animasikan properti `scrollLeft` ke kiri/ke kanan,
// berdasarkan nilai atribut `data-direction` pada tombol yang diklik
var dir = $(this).data('direction');
$carousel.stop().animate({
scrollLeft: (dir == "next") ? "+=100px" : "-=100px"
}, 200);
});
})(jQuery);
Demo
Labels: Gambar, JavaScript, jQuery, Potongan
7 Comments:
caranya agar gamabr nya berganti sendiri tanpa di click button nya gimana om.... :-bd
Masih kebingungan memicu sesuatu di batas akhir hanya pada saat scroll berakhir...
kang mohon bantuannya nih
kebetulan punya kasus sama,,,soal rotasi
yaitu supaya mengulang suatu objek pada saat objek terakhir di tampilkan
ini scrit yg saya nemu kang
iklan1_timeleft = 10;
iklan2_timeleft = 10;
var right_timeout;
$(function () {
Right1Timeout()
});
function Right1Timeout() {
if (iklan1_timeleft > 1) {
right_timeout = setTimeout("Right1Timeout()", 1000)
} else {
$(".right-iframe-rotation").html('<iframe src="url-iframe" width="308" height="795" scrolling="no" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></iframe>');
Right2Timeout()
}
iklan1_timeleft--
}
function Right2Timeout() {
if (iklan2_timeleft > 1) {
right_timeout = setTimeout("Right2Timeout()", 1000)
} else {
$(".right-iframe-rotation").html('<iframe src="url-iframe" width="308" height="795" scrolling="no" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></iframe>')
}
iklan2_timeleft--
};
maunya sih setelah Right2Timeout, kembali lagi ke Right1Timeout kang =p*
function Right1Timeout() {
if (iklan1_timeleft > 1) {
right_timeout = setTimeout("Right1Timeout()", 1000);
} else {
$(".right-iframe-rotation").html('<iframe src="url-iframe" width="308" height="795" scrolling="no" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></iframe>');
Right2Timeout();
}
iklan1_timeleft--;
}
function Right2Timeout() {
if (iklan2_timeleft > 1) {
right_timeout = setTimeout("Right2Timeout()", 1000);
} else {
$(".right-iframe-rotation").html('<iframe src="url-iframe" width="308" height="795" scrolling="no" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></iframe>');
Right1Timeout();
}
iklan2_timeleft--;
}
walah
jadi nga jalan kang komputer saya, load memory firefox jadi tinggi, kompi beku nga bisa gerak :(
coba kang di cek di _http://8anzai.blogspot.com/2012/10/spider-man.html
tulung ya kang :D
<div class="right-iframe-rotation">Loading...</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function($) {
var timer = 0;
var delay = 5000;
var urls = [
"http://mini-web-tools.googlecode.com/svn/p/css-compressor-and-beautifier.html",
"http://hompimpa.googlecode.com/svn/trunk/personal/html-escaper.html"
];
function reLoading() {
$('.right-iframe-rotation').html('<ifr' + 'ame src="' +urls[timer] + '" width="308" height="795" scrolling="no" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0"></ifr' + 'ame>');
timer = (timer < (urls.length-1)) ? timer+1 : 0;
}
setInterval(reLoading, delay);
})(jQuery);
</script>
Demo: http://jsfiddle.net/tovic/3jdxE/5/
hi plz how i can convert him to json carousel by label?? plz tell me here or at my gmail
alwanarabe@gmail.com
Post a Comment
<< Home