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.