我试图尝试一些不同的旋转木马,id喜欢有可能改变旋转木马本身的非活动元素的不透明度。
<section class="wrap">
<div></div>
</section>
<section id="carousel">
<ul>
<li>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</li>
<li>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
</li>
<li>
$(document).ready(function() {
$("#carousel ul").jcarousel({
scroll:1,
auto:5,
wrap:'both',
easing: 'easeInOutBack',
buttonNextHTML: null,
buttonPrevHTML: null
});
});
在下面的这个link中,有一个例子,我想从中央div开始获得。 col,让其他元素,左边和右边的元素几乎看不见,是否有可能???
提前谢谢!
答案 0 :(得分:0)
我找到了插件作者的一个例子,我相信它能做到你想要的。你可以看看这个链接:
//编辑,你可以试试这个,有些小问题应该可行。
CSS - .jcarousel-item { opacity : 0.1 } .jcarousel-item.active { opacity: 1 !important }
JS -
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 3,
scroll: 1,
itemVisibleInCallback: {
onAfterAnimation: function ( c, o, i, s ) {
i = ( i - 2 ) % $('#mycarousel li').size();
jQuery('.jcarousel-item').removeClass('active');
jQuery('.jcarousel-item').eq( i ).addClass('active');
}
}
});
});