Cara Membuat Infinity Carousel Slider

Hallo sobat Wahid Emalution , pada hari ini saya akan membagikan Tutorial cara membuat Slider Infinity carousel.

Bagi yang belum tau , sedikit penjelasannya . infinity carousel adalah slider yang terdapat di blog. Sama seperti slider lain , tetapi bedanya slider ini tidak ada batasnya, Jadi jika sobat ingin mengisi 50 gambar pun bisa .

nah begitu penjelasannya, maaf kalau penjelasannya tidak terlalu jelas , langsung saja kita ke caranya .

1. login ke Blogger.com lalu buka template dan Edit HTML.

2. Letakkan kode di bawah Diatas ]]</b:skin> atau </style>

/* Caja contenedora carrusel o Listón */
#caja-carrusel{width:920px;height:155px;overflow:hidden;margin:20px auto;padding:0;position:relative;top:0;z-index:5;}
/*Estilos del Carrusel de imágenes */
.infiniteCarousel{width:900px;position:relative;height:170px;margin:0 0 0 10px;}
.infiniteCarousel .wrapper{width:845px;overflow:auto;height:170px;margin:0 25px 0 25px;position:absolute;top:0;}
.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}
.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}
.infiniteCarousel ul li{display:block;float:left;padding:9px;height:142px;width:102px;}
.infiniteCarousel ul li a img{display:block;color:#000;}
.infiniteCarousel .icon-angle-right{right:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}
.infiniteCarousel .icon-angle-left{left:0;font-size:60px;top:40px;position:absolute;cursor:pointer;}

Agar Slider Aktif Berikan jQuery  Pada template sobat , Letakan jQuery dibawah tepat diatas </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Update , Letakkan Kode dibawah di atas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

Lalu Setelah itu Letakkan Javascript dibawah tepat diatas </head>

<script type='text/javascript'>
//<![CDATA[
$.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);            

            if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        $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'); 
        
        $wrapper.scrollLeft(singleWidth * visible);
        
            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="icon-angle-left"></a><a class="icon-angle-right"></a>');
        
          $('a.icon-angle-left', this).click(function () {
            return gotoPage(currentPage - 1);                
        });
        
        $('a.icon-angle-right', this).click(function () {
            return gotoPage(currentPage + 1);
        });
        
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    });  
};
$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
//]]>
</script>

Setelah Itu Letakkan Kode Dibawah Pada anttara kode <body> sampai </body> , tergantung sobat ingin meletakkan nya dimana.

<div id='caja-carrusel'>
<div class='infiniteCarousel'>
      <div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '>
        <ul>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/5/47421.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/50361.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/24647.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/10/47347.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/9/35721.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/9391.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/5123.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/9/9453.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/11460.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/11/33657.jpg' title='Lorum Ipsum'/></a></li> 
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>      
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/52265.jpg' title='Lorum Ipsum'/></a></li>  
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/41125.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>      
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/52265.jpg' title='Lorum Ipsum'/></a></li>           
      </ul>        
    </div>
  </div></div>

Nah Sangat Mudah Bukan , Sampai Sini Saja Cara Membuat Infinity Carousel Slider  .

Terima kasih, dan semoga Bermanfaat.