旋轉木馬/多元素

我試圖讓一個類似的在this IMDB page 旋轉木馬/多元素

底部「人誰喜歡這個也喜歡」部分，我想我會用isotope jQuery的旋轉木馬和網格的滑塊rcarousel其中，同位素會將所有項目排列在網格中，例如格式，我會使用rcarousel使用AJAX添加新網格並將其滑動。對不起，我沒有太多的代碼，我在開始這個項目時遇到了麻煩。請給我一個可以完成這件事的插件，或者讓我知道我的方式是否可行。

我現在所擁有的是這樣的，明明好好嘗試在所有的工作：

HTML：

<div id="reco" class="span4"> 
    <div class="reco-group"> 
     <div class="movie item-parent"><a title="Sin city" class="movie-link"><img src="images/1.jpg" /></a></div> 
     <div class="movie item-parent"><a title="Annie Hall" class="movie-link"><img src="images/2.jpg" /></a></div> 
     <div class="movie item-parent"><a title="Madagascar 3" class="movie-link"><img src="images/3.jpg" /></a> </div> 
     <div class="movie item-parent"><a title="As Good As It Gets" class="movie-link"><img src="images/4.jpg" /></a></div> 
    </div> 
</div>

的jQuery：

$('#reco').rcarousel({ 
}); 

var $container = $('.reco-group'); 
$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.movie', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     }, 
     containerStyle:{ 
      position:'relative' 
     } 
    }); 
});

來源

2012-12-30 soundswaste

即使我發現this。我使用TinyCarousel插件來做到這一點。我分組的所有元素在這樣一個特定的矩陣：

<div id="reco" class="span4"> 
    <a class="buttons prev" href="#">left</a> 
     <div class="viewport"> 
      <ul class="overview"> 
       <li class="movie-group"> 
        <span class="movie"><a title="Sin city" class="movie-link"><img src="images/1.jpg" /></a></span> 
        <span class="movie"><a title="Annie Hall" class="movie-link"><img src="images/2.jpg" /></a></span> 
        <span class="movie"><a title="Madagascar 3" class="movie-link"><img src="images/3.jpg" /></a></span> 
        <span class="movie"><a title="As Good As It Gets" class="movie-link"><img src="images/4.jpg" /></a></span> 
       </li> 
       <li class="movie-group"> 
        <span class="movie"><a title="Sin city" class="movie-link"><img src="images/1.jpg" /></a></span> 
        <span class="movie"><a title="Annie Hall" class="movie-link"><img src="images/2.jpg" /></a></span> 
        <span class="movie"><a title="Madagascar 3" class="movie-link"><img src="images/3.jpg" /></a></span> 
        <span class="movie"><a title="As Good As It Gets" class="movie-link"><img src="images/4.jpg" /></a></span> 
       </li> 
      </ul> 
     </div> 
    <a class="buttons next" href="#">right</a> 
</div>

我包括necessry CSS和JS，如提到的插件，網站的源代碼。和一個簡單的jquery線：

$('#reco').tinycarousel();

而那就是它。希望它也能幫助別人。

來源

2013-01-02 14:05:13 soundswaste

今天我試圖做同樣的事情，當時我正在搜索我來到這個頁面，但是這個答案對我來說不起作用。以下給出了我是如何做到的。

我用responsivecarousel：basilio.github.io/responsiveCarousel/#how-to-use

檢查下面給出的例子。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jquery grid carousel</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://basilio.github.io/responsiveCarousel/js/responsiveCarousel.js"></script> 
     <script> 
      jQuery(document).ready(function($){ 
       $('.crsl-items').carousel(); 
      }); 
     </script> 
     <style> 
      img { 
       width: 80px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="NAV-ID" class="crsl-nav"> 
      <a href="#" class="previous">Previous</a> 
      <a href="#" class="next">Next</a> 
     </div> 

     <div class="crsl-items" data-navigation="NAV-ID"> 
      <div class="crsl-wrap"> 
       <figure class="crsl-item"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/sports.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/sports.jpg"><br> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/sports.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/sports.jpg"> 
       </figure> 
       <figure class="crsl-item"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/nature.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/nature.jpg"><br> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/nature.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/nature.jpg"> 
       </figure> 
       <figure class="crsl-item"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/food.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/food.jpg"><br> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/food.jpg"> 
        <img src="http://basilio.github.io/responsiveCarousel/img/temp/food.jpg"> 
       </figure> 
      </div> 
     </div> 
    </body> 
</html>

測試：http://jsfiddle.net/d59phwrt/

更新：

有沒有在之前的解決方案的分頁的問題。所以我用貓頭鷹傳送帶來做同樣的事情。

http://owlgraphic.com/owlcarousel/index.html#how-to

這種解決方案比上述更好。示例代碼如下。

<div id="owl-demo" class="owl-carousel"> 

     <div class="item"> 
      <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
      <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /><br> 
      <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
      <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" /> 
     </div> 
     <div class="item"><h1>2</h1></div> 
     <div class="item"><h1>3</h1></div> 
     <div class="item"><h1>4</h1></div> 

    </div> 
    <div class="customNavigation"> 
     <a class="btn prev">Previous</a> 
     <a class="btn next">Next</a> 
     <a class="btn play">Autoplay</a> 
     <a class="btn stop">Stop</a> 
    </div> 


    <script src="../assets/js/jquery-1.9.1.min.js"></script> 
    <script src="../owl-carousel/owl.carousel.js"></script> 


    <!-- Demo --> 

    <style> 
    #owl-demo .item{ 
     background: #3fbf79; 
     padding: 30px 0px; 
     margin: 10px; 
     color: #FFF; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     border-radius: 3px; 
     text-align: center; 
    } 
    .customNavigation{ 
     text-align: center; 
    } 
    .customNavigation a{ 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    } 
    </style> 


    <script> 
    $(document).ready(function() { 

     var owl = $("#owl-demo"); 

     owl.owlCarousel({ 

     items : 1, //10 items above 1000px browser width 
     itemsDesktop : [1000,5], //5 items between 1000px and 901px 
     itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px 
     itemsTablet: [600,2], //2 items between 600 and 0; 
     itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option 
     pagination : false 

     }); 

     // Custom Navigation Events 
     $(".next").click(function(){ 
     owl.trigger('owl.next'); 
     }) 
     $(".prev").click(function(){ 
     owl.trigger('owl.prev'); 
     }) 
     $(".play").click(function(){ 
     owl.trigger('owl.play',1000); 
     }) 
     $(".stop").click(function(){ 
     owl.trigger('owl.stop'); 
     }) 


    }); 
    </script>

來源

2014-09-29 09:34:54 Nadeeth

旋轉木馬/多元素

回答

相關問題