})
//NEXT
$('.social-next a').on('click', function(e){
e.preventDefault();
$('.social').animate({marginLeft: '-940px'});
})
//PREVIOUS
$('.social-previous a').on('click', function(e){
e.preventDefault();
$('.social').animate({marginLeft: '940px'}, 500);
})
这只是修复了边距的值,而我需要通过按下“上一页”和“下一页”按钮来滑动我的内容,使其移动,这一点很明显。
谢谢。
编辑:
.social {
width: 2820px;
overflow: hidden;
}
.social .slide {
width: 940px;
float: left;
overflow: hidden;
}
.social-previous {
position: absolute;
top: 50%;
left: 0;
}
.social-next {
position: absolute;
top: 50%;
right: 0;
}
以及HTML代码:
<div class="social">
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="show-slides">Check it!</a></div>
<div class="slide">
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
<div class="content">dolor dolor dolor <a href="#" class="close-slides"></a></div>
</div>
<div class="slide">
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
<div class="content">ipsum ipsum ipsum ipsum ipsum<a href="#" class="close-slides"></a></div>
</div>
<div class="slide">
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
<div class="content">Lorem Lorem Lorem Lorem Lorem<a href="#" class="close-slides"></a></div>
</div>
</div>
它也在其他的div中,但我认为它们不相关。