cara membuat menu Infinite Carousel di blog

Cara memasang

1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di bawah ini kedua nya.

.infiniteCarousel {
  width: 395px;
  position: relative;
}

.infiniteCarousel .wrapper {
  width: 315px; /* .infiniteCarousel width - (.wrapper margin-left + 
.wrapper margin-right) */
  overflow: auto;
  min-height: 10em;
  margin: 0 40px;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul a img {
  border: 5px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 10px;
  height: 85px;
  width: 85px;
}

.infiniteCarousel ul li a img {
  display:block;
}

.infiniteCarousel .arrow {
  display: block;
  height: 36px;
  width: 37px;
  background: 
url(https://sites.google.com/site/anchamanproject/Left-Arrow.png) 
no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 37px;
  cursor: pointer;
}

.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}

-->
</style>

$.fn.infiniteCarousel = function () {

function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
  
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
            
            singleWidth = $single.outerWidth(), 
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), //
 note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);

// 1. Pad so that 'visible' number will always be seen, 
otherwise create empty items
        if (($items.length % visible) != 0) {
            $slider.append(repeat('
<li class="empty" />', visible -
 ($items.length % visible)));
            $items = $slider.find('> li');
        }

// 2. Top and tail the list with 'visible' number of items, top 
has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- 
visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, 
visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
        
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
        
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
            
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }

currentPage = page;
            });                
            
            return false;
        }
        
        $wrapper.after('<a class="arrow back"><</a><a 
class="arrow forward">></a>');
        
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
</script>

Anda baru saja membaca artikel yang berkategori blogger dengan judul cara membuat menu Infinite Carousel di blog. Anda bisa bookmark halaman ini dengan URL https://blogbudakbungo.blogspot.com/2013/03/cara-membuat-menu-infinite-carousel-di.html. Terima kasih......??? sampai jumpa di blog saya berikutnya......??

Ditulis oleh: blog budak bungo - Wednesday, 6 March 2013

Blog Budak Bungo

Iklan

BLOG BUDAK BUNGO

Pages

Connect With Us

Instructions

Recomended

Labels

Las series más vistas

Categories

About Me

Followers

Our Partners

Archive

cara membuat menu Infinite Carousel di blog

Belum ada komentar untuk "cara membuat menu Infinite Carousel di blog"

DAFTAR ISI

Entri Populer

Label

LIKE FB YA...........????

BUKU TAMU

TERJEMAHAN

Total Tayangan