})
//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);
})
This just fixes the margin value, I need to slide my content on the other hand so by pressing next and prev I need to slide it around, kind of obvious.
Thanks.
edit:
.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;
}
and the 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>
It’s in other divs as well, but they are not relevant I think.
To add to the previous value use
+=: