Note that there are some explanatory texts on larger screens.

plurals
  1. POCarousel/slider of a grid of multiple elements
    primarykey
    data
    text
    <p>I am trying to make a jquery carousel similar to the one in 'People who liked this also liked' section at the bottom of <a href="http://www.imdb.com/title/tt0790724/" rel="nofollow">this IMDB page</a></p> <p>I thought I would use <a href="http://isotope.metafizzy.co/" rel="nofollow">isotope</a> and <a href="http://ryrych.github.com/rcarousel/" rel="nofollow">rcarousel</a> where isotope would align all my items in a grid like format and I would use rcarousel to add new grids using AJAX and slide them. Sorry I don't have much of a code, and I am having trouble getting started on this project. Please point me to a plugin that can get this done, or let me know if my way is doable.</p> <p>What I have right now is this, and obviously doens't work at all :</p> <p>HTML:</p> <pre><code>&lt;div id="reco" class="span4"&gt; &lt;div class="reco-group"&gt; &lt;div class="movie item-parent"&gt;&lt;a title="Sin city" class="movie-link"&gt;&lt;img src="images/1.jpg" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="movie item-parent"&gt;&lt;a title="Annie Hall" class="movie-link"&gt;&lt;img src="images/2.jpg" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;div class="movie item-parent"&gt;&lt;a title="Madagascar 3" class="movie-link"&gt;&lt;img src="images/3.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="movie item-parent"&gt;&lt;a title="As Good As It Gets" class="movie-link"&gt;&lt;img src="images/4.jpg" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>jquery :</p> <pre><code>$('#reco').rcarousel({ }); var $container = $('.reco-group'); $container.imagesLoaded(function() { $container.isotope({ itemSelector: '.movie', animationOptions: { duration: 750, easing: 'linear', queue: false }, containerStyle:{ position:'relative' } }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload