})
//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);
})
Run Code Online (Sandbox Code Playgroud)
这只是修复了边距值,我需要另一方面滑动我的内容,所以按下一个并且上一个我需要滑动它,有点明显.
谢谢.
编辑:
.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;
}
Run Code Online (Sandbox Code Playgroud)
和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>
Run Code Online (Sandbox Code Playgroud)
它也在其他div中,但我认为它们并不相关.
要添加到以前的值,请使用+=:
$('.social').animate({marginLeft: '+=940px'}, 500);
--^--
Run Code Online (Sandbox Code Playgroud)