I have been making updates to this page, which you can view here. When you select "Let's Get Started" and then proceed with the right arrows, the divs smoothly move to the left without shrinking. However, when clicking on the back or left arrows, the div moves correctly to the right but unfortunately shrinks in size, which is not the desired effect.
Is there a way to prevent the divs from shrinking when moving to the right? I've adjusted the CSS so that the div does not slide completely off the page for better visibility of the issue.
Below is the jQuery code responsible for handling the animations:
function forward(){
console.log("forward function executed");
// debugger;
console.log("current page before incrementing: " + page);
$('#' + page).addClass( "gone_left", 1000, "swing" );
page = page + 1;
$('#' + page).removeClass("gone_left gone_right");
console.log("current page after incrementing: " + page);
manageChevrons();
}
function back(){
console.log("back function executed");
// debugger;
console.log("current page before decrementing: " + page);
$('#' + page).addClass( "gone_right", 1000, "swing");
page = page - 1;
$('#' + page).removeClass("gone_left gone_right");
manageChevrons();
}
The manageChevrons function simply handles the display of the right and left arrows.
Next, here is the relevant CSS code:
@media only screen and (min-width: 900px){
html {
font-size: 18px;
}
}
.no_overflow {
overflow: hidden !important;
}
.gone_left {
left: -5% !important;
}
.gone_right {
left: 90% !important;
}
.card_center {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) translateX(-50%) !important;
left: 50%;
}
Finally, here is the HTML structure of the page:
<html>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<body class="no_overflow">
<div class="container top-pad">
<div class="row">
<div class="col s4">
<%= image_tag "logo.png", class:"responsive-img" %>
</div>
</div>
</div>
<div class="container">
<div class="row valign-wrapper">
<div class="left_chevron">
<i id="chevron_left" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden left_chevron">chevron_left</i>
</div>
<div id="3" class="card large card_center">
<div class="card-image">
<%= image_tag "3.png" %>
<span class="card-title"></span>
</div>
<div class="card-content card_position">
<p>This is #4
<ul>US: xxx</ul>
<ul>EU: xxx</ul>
</p>
</div>
</div> <!-- end of fourth card -->
<div id="2" class="card large card_center">
<div class="card-image">
<%= image_tag "2.png" %>
<span class="card-title"></span>
</div>
<div class="card-content card_position">
<p>You will need to get carrier calculated shipping
enabled on your store. Its free if you signed
up for the annual plan, otherwise its just $20/month.
Call Shopify to enable it:
<ul>US: xxx</ul>
<ul>EU: xxx</ul>
</p>
</div>
</div> <!-- end of third card -->
<div id="1" class="card large card_center">
<div class="card-image">
<%= image_tag "1.png" %>
<span class="card-title"></span>
</div>
<div class="card-content card_position">
<p>For $25/month we fulfill an unlimited number of
orders, so you don't have too.</p>
</div>
</div> <!-- end of second card -->
<div id="0" class="card large card_center">
<div class="card-image">
<%= image_tag "hi.png" %>
<span class="card-title"></span>
</div>
<div class="card-content card_position">
<p>Welcome to FBA Shipping by ByteStand.
A super simple way to automate fulfilling FBA items
in the US and abroad.</p>
</div>
<div class="card-action">
<button id="first_button" class="waves-effect btn stroke-btn tap">Let's Get Started!</button>
</div>
</div><!-- end of first card -->
<div class="right_chevron">
<i id="chevron_right" class="waves-effect waves-circle large material-icons purple-text text-darken-4 hidden right_chevron">chevron_right</i>
</div>
</div> <!-- end of main row -->
</div> <!-- end of container -->
</body>
</html>