Im trying to essentially 1 page where on a button click all the content slides off to the left and the new page slides in from the right.
I am working off of this JS Fiddle from another post and trying to adapt it to my site but i can't see why it's not working.
This fiddle im working from uses this JQuery:
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-50%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
This is my Jquery:
$(document).ready(function () {
$('.slide').click(function()
{
$('.sliding-container').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-50%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
});
Any ideas would be much appreciated.
Please see my CodePen here for the rest of my code: https://codepen.io/Magicrecon/pen/BRzXRa
Building on your previous code, here are pointers
slider
and add it as a class See snippet below
$(document).ready(function() { $('.slide').click(function() { var that = this; $('.sliding-container').each(function() { if ($(that).parents(".sliding-container")[0] != this) { $(this).css("left", "100%") } else { $(this).animate({ left: '100%' }, 500); } if ($(that).parents(".sliding-container").next().index() == 3) { $(".sliding-container:first-child").animate({ left: '0%' }, 500); } else { $(that).parents(".sliding-container").next().animate({ left: '0%' }, 500); } }); }); });
#mainscreen-container { position: absolute; width: 100%; height: 100vh; overflow-x: hidden; } .sliding-container { position: absolute; width: 100vw; } #sliding-container1 { background-color: red; } #sliding-container2 { background-color: green; left: 150%; } #sliding-container3 { background-color: blue; left: 150%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mainscreen-container"> <div id="sliding-container1" class="sliding-container"> <div style="height: 100vh; width: 100%"> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left slide-button"> </span> </div> <div class="header-container"> <div style="height: 40vh; display: block;"></div> <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p> <div style="height: 20vh; display: block;"></div> </div> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right slide-button"> </span> </div> </div> </div> <div id="sliding-container2" class="sliding-container"> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left"> </span> </div> <div class="header-container"> <div style="height: 40vh; display: block;"></div> <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p> <div style="height: 20vh; display: block;"></div> </div> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right"> </span> </div> </div> <div id="sliding-container3" class="sliding-container"> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: left;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh; float: right;" class="fa fa-chevron-left"> </span> </div> <div class="header-container"> <div style="height: 40vh; display: block;"></div> <p>Click <b style="cursor: pointer;" class="slide">THIS</b> to slide accross</p> <div style="height: 20vh; display: block;"></div> </div> <div style="width: 5%; display: inline-block; height: 100vh; overflow: hidden; position: relative; float: right;"> <span style="color: white; font-size: 25pt; cursor: pointer; margin-top: 50vh;" class="fa fa-chevron-right"> </span> </div> </div>
$('.slide').click(function()
there is no element with a class slide
in you html
$(this).animate({ left: '-50%' }, 500);
The element with that Id that you click will get the properties of left: '-50%'
but it doesn't change anything because the element doesn have a position: absolute
css value
Before you code this much just change the css manually to see if the jquery rules you add to an element will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.