我正在努力制作一个类似于'{3}}
底部的'喜欢这个也喜欢的人'部分的jquery轮播我以为我会使用this IMDB page和isotope,其中同位素会以网格格式对齐我的所有项目,我会使用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'
}
});
});
答案 0 :(得分:0)
即使我找到了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>
我提供了必需的CSS和JS,如插件网站的源代码所述。还有一个简单的jquery系列:
$('#reco').tinycarousel();
就是这样。希望它也可以帮助其他人。
答案 1 :(得分:0)
今天我试图做同样的事情,当我搜索时,我来到这个页面,但这个答案对我不起作用。以下是我如何做到的。
我用的是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/
更新:
上一个解决方案的分页存在问题。所以我用owl-carousel做同样的事情。
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>