Mecha versi 2.6.4 sudah dirilis!

jQuery Carousel

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  4. Demo 
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 

7 Komentar

Unknown

caranya agar gamabr nya berganti sendiri tanpa di click button nya gimana om.... :-bd

Taufik Nurrohman

Masih kebingungan memicu sesuatu di batas akhir hanya pada saat scroll berakhir...

Anonim

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*

Taufik Nurrohman

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--;
}

Anonim

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

Taufik Nurrohman

<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/

admin

hi plz how i can convert him to json carousel by label?? plz tell me here or at my gmail
alwanarabe@gmail.com

Komentar telah ditutup.