What i want to do is to slide divs off and on screen sequentially by clicking on navigation arrows left and right according to the direction. When you click the right arrow divs slide on screen from right to left and it works fine. I can't figure out the code for the left arrow so the divs will slide on screen from the opposite direction left to right. Here is a fiddle: http://jsfiddle.net/ykbgT/6696/
There is another question Slide divs off screen using jQuery + added navigation arrows marked as answered but the answer does not give any details for the functions of the navigation arrows.
Here is the code:
HTML
<div class="move left">←</div>
<div class="move right">→</div>
<div id="container">
<div id="box1" class="box current">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
CSS
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
.move{
position:fixed;
z-index:2;
top:50%;
margin-top:-20px;
text-align:center;
padding:20px;
background:#fff;
color: #000;
}
.left{
left:0;
}
.right{
right:0;
}
JAVASCRIPT
$('.right').click(function(event) {
$('.current').animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
$(this).removeClass('current');
});
$('.current').next().animate({
left: '50%'
}, 500, function (){
$(this).addClass('current');
});
});
$('.left').click(function(event) {
$('.current').animate({
left: '50%'
}, 500, function() {
$(this).css('left', '-150%');
$(this).prependTo('#container');
$(this).removeClass('current');
});
$('.current').prev().animate({
left: '-50%'
}, 500, function (){
$(this).addClass('current');
});
});
Try this
I have edited your code
var i = 1;
$('.right').click(function () {
if (i < $('#container div').length) {
$("#box" + i).animate({
left: '-50%'
}, 400, function () {
var $this = $("#box" + i);
$this.css('left', '150%')
.appendTo($('.container'));
});
$("#box" + i).next().animate({
left: '50%'
}, 400);
i++;
}
});
$('.left').click(function () {
if (i > 1) {
$("#box" + i).animate({
left: '150%'
}, 400, function () {
var $this = $("#box" + i);
$this.css('right', '-150%')
.appendTo($('.container'));
});
$("#box" + i).prev().animate({
left: '50%'
}, 400);
i--;
}
});
Hope this helps,Thank you
SOLUTION WITH LESS JS AND CSS TRANSITIONS
Help from @BenjaminGruenbaum
Check the working fiddle: http://jsfiddle.net/zPVFd/1/
HTML - class '.current' removed:
<div id="box1" class="box">Div #1</div>
CSS - added css transitions to '.box'
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
JS CODE
var boxes = $(".box").get(),
current = 0;
$('.right').click(function () {
if (current == (-boxes.length + 1)){
} else {
current--;
updateBoxes();
}
});
function updateBoxes() {
for (var i = current; i < (boxes.length + current); i++) {
boxes[i - current].style.left = (i * 100 + 50) + "%";
}
}
$('.left').click(function () {
if (current == 0){
}else{
current++;
updateBoxes();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With